@trackunit/react-components 0.1.358 → 0.1.361

package/index.cjs.js

@@ -1360,6 +1360,32 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [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 [focused, setFocused] = React.useState(hasFocus); // Focus for first render
+    React.useEffect(() => {
+        setFocused(hasFocus()); // Focus for additional renders
+        const onFocusInternal = () => {
+            setFocused(true);
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        };
+        const onBlurInternal = () => {
+            setFocused(false);
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        };
+        window.addEventListener("focus", () => onFocusInternal);
+        window.addEventListener("blur", () => onBlurInternal);
+        return () => {
+            window.removeEventListener("focus", onFocusInternal);
+            window.removeEventListener("blur", onBlurInternal);
+        };
+    }, [onBlur, onFocus]);
+    return { focused };
+};
+
 const cvaBreadcrumb = cssClassVarianceUtilities.cvaMerge(["my-4", "flex", "place-items-center"]);
 const cvaBreadcrumbItem = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cvaMerge(["flex", "flex-nowrap"]);
@@ -4410,7 +4436,7 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
             none: "",
         },
         focused: {
-            true: ["rounded-lg", "outline", "outline-2", "outline-blue-600"],
+            true: ["rounded-lg", "outline", "outline-2", "outline-primary-600"],
             false: "",
         },
     },
@@ -4668,3 +4694,4 @@ exports.useResize = useResize;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
 exports.useVisibilityChange = useVisibilityChange;
+exports.useWindowActivity = useWindowActivity;

package/index.esm.js

@@ -1329,6 +1329,32 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [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 [focused, setFocused] = useState(hasFocus); // Focus for first render
+    useEffect(() => {
+        setFocused(hasFocus()); // Focus for additional renders
+        const onFocusInternal = () => {
+            setFocused(true);
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        };
+        const onBlurInternal = () => {
+            setFocused(false);
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        };
+        window.addEventListener("focus", () => onFocusInternal);
+        window.addEventListener("blur", () => onBlurInternal);
+        return () => {
+            window.removeEventListener("focus", onFocusInternal);
+            window.removeEventListener("blur", onBlurInternal);
+        };
+    }, [onBlur, onFocus]);
+    return { focused };
+};
+
 const cvaBreadcrumb = cvaMerge(["my-4", "flex", "place-items-center"]);
 const cvaBreadcrumbItem = cvaMerge(["flex", "items-center"]);
 const cvaBreadcrumbForLargeScreen = cvaMerge(["flex", "flex-nowrap"]);
@@ -4379,7 +4405,7 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
             none: "",
         },
         focused: {
-            true: ["rounded-lg", "outline", "outline-2", "outline-blue-600"],
+            true: ["rounded-lg", "outline", "outline-2", "outline-primary-600"],
             false: "",
         },
     },
@@ -4541,4 +4567,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, 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 };
+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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.358",
+  "version": "0.1.361",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -22,7 +22,7 @@
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "14.0.0",
     "@floating-ui/react": "^0.26.6",
-    "@tanstack/react-router": "1.31.6",
+    "@tanstack/react-router": "1.40.0",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/react-table-pagination": "*",

package/src/hooks/index.d.ts

@@ -15,3 +15,4 @@ export * from "./useResize";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
 export * from "./useVisibilityChange";
+export * from "./useWindowActivity";

package/src/hooks/useWindowActivity.d.ts

@@ -0,0 +1,11 @@
+type UseWindowActivityProps = {
+    onFocus?: () => void;
+    onBlur?: () => void;
+};
+/**
+ * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
+ */
+export declare const useWindowActivity: ({ onFocus, onBlur }?: UseWindowActivityProps) => {
+    focused: boolean;
+};
+export {};