@trackunit/react-components 4.2.0 → 5.0.0

package/index.cjs.js

@@ -13662,99 +13662,6 @@ const useContainerBreakpoints = (ref, options = {}) => {
     return containerSize;
 };
 
-/**
- * Hook for managing timeouts.
- *
- * @param {object} options - Options for the useTimeout hook.
- * @param {Function} options.onTimeout - Callback function to execute on timeout.
- * @param {number} options.duration - Duration of the timeout in milliseconds.
- * @returns {object} An object containing functions to start and stop the timeout.
- */
-const useTimeout = ({ onTimeout, duration, }) => {
-    const ready = react.useRef(false);
-    const timeout = react.useRef(null);
-    const callback = react.useRef(onTimeout);
-    const startTimeout = react.useCallback(() => {
-        ready.current = false;
-        if (timeout.current) {
-            clearTimeout(timeout.current);
-        }
-        timeout.current = setTimeout(() => {
-            ready.current = true;
-            callback.current();
-        }, duration);
-    }, [duration]);
-    const stopTimeout = react.useCallback(() => {
-        ready.current = null;
-        if (timeout.current) {
-            clearTimeout(timeout.current);
-        }
-    }, []);
-    react.useEffect(() => {
-        // Use the latest callback function provided by the parent component.
-        callback.current = onTimeout;
-    }, [onTimeout]);
-    react.useEffect(() => {
-        // Cleanup function to clear the timeout when component unmounts
-        return () => {
-            if (timeout.current) {
-                clearTimeout(timeout.current);
-            }
-        };
-    }, []);
-    return react.useMemo(() => ({ startTimeout, stopTimeout }), [startTimeout, stopTimeout]);
-};
-
-/**
- * Hook for continuous retries with a timeout mechanism.
- *
- * @param {object} options - Options for the useContinuousTimeout hook.
- * @param {Function} options.onTimeout - Callback function to execute on each timeout.
- * @param {Function} options.onMaxRetries - Callback function to execute when the maximum number of retries is reached.
- * @param {number} options.duration - Duration of the timeout in milliseconds.
- * @param {number} options.maxRetries - Maximum number of retry attempts.
- * @returns {object} An object containing functions to start and stop the timeout, current retry count, and the timeout status.
- */
-const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries, }) => {
-    const retries = react.useRef(0);
-    const [isRunning, setIsRunning] = react.useState(false); // Track the timeout status
-    const { startTimeout, stopTimeout } = useTimeout({
-        duration,
-        onTimeout: () => {
-            if (isRunning) {
-                onTimeout();
-                if (retries.current < maxRetries) {
-                    retries.current++;
-                }
-                else {
-                    onMaxRetries?.();
-                    retries.current = 0;
-                }
-                startTimeout(); // Restart the timeout if it's still running
-            }
-        },
-    });
-    const stopTimeouts = react.useCallback(() => {
-        stopTimeout();
-        setIsRunning(false); // Update the status when stopped
-    }, [stopTimeout]);
-    const startTimeouts = react.useCallback(() => {
-        if (isRunning) {
-            return; // Prevent multiple timeouts from running
-        }
-        startTimeout();
-        setIsRunning(true); // Update the status when started
-    }, [isRunning, startTimeout]);
-    return react.useMemo(() => ({
-        startTimeouts,
-        stopTimeouts,
-        isRunning,
-        get retries() {
-            return retries.current;
-        },
-    }), [startTimeouts, stopTimeouts, isRunning]);
-};
-
 // Copied from https://github.com/rexxars/use-device-pixel-ratio
 /**
  * Get the device pixel ratio, potentially rounded and capped.
@@ -14535,19 +14442,6 @@ const getWindowSize = () => {
     }
 };
 
-/**
- * A useRef that updates its given value whenever it changes.
- *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
- */
-const useSelfUpdatingRef = (initialState) => {
-    const stateRef = react.useRef(initialState);
-    react.useEffect(() => {
-        stateRef.current = initialState;
-    }, [initialState]);
-    return stateRef;
-};
-
 /**
  * Hook for filtering a list of items by text search, client side search in a list.
  *
@@ -14569,6 +14463,49 @@ function useTextSearch(items, props) {
     return react.useMemo(() => [result, searchText, setSearchText], [result, searchText, setSearchText]);
 }
 
+/**
+ * Hook for managing timeouts.
+ *
+ * @param {object} options - Options for the useTimeout hook.
+ * @param {Function} options.onTimeout - Callback function to execute on timeout.
+ * @param {number} options.duration - Duration of the timeout in milliseconds.
+ * @returns {object} An object containing functions to start and stop the timeout.
+ */
+const useTimeout = ({ onTimeout, duration, }) => {
+    const ready = react.useRef(false);
+    const timeout = react.useRef(null);
+    const callback = react.useRef(onTimeout);
+    const startTimeout = react.useCallback(() => {
+        ready.current = false;
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
+    const stopTimeout = react.useCallback(() => {
+        ready.current = null;
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+    }, []);
+    react.useEffect(() => {
+        // Use the latest callback function provided by the parent component.
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    react.useEffect(() => {
+        // Cleanup function to clear the timeout when component unmounts
+        return () => {
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
+        };
+    }, []);
+    return react.useMemo(() => ({ startTimeout, stopTimeout }), [startTimeout, stopTimeout]);
+};
+
 const canUseMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 const getViewportBreakpointState = () => {
     if (!canUseMatchMedia())
@@ -14817,7 +14754,6 @@ exports.preferenceCardGrid = preferenceCardGrid;
 exports.useBidirectionalScroll = useBidirectionalScroll;
 exports.useClickOutside = useClickOutside;
 exports.useContainerBreakpoints = useContainerBreakpoints;
-exports.useContinuousTimeout = useContinuousTimeout;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useCustomEncoding = useCustomEncoding;
 exports.useDebounce = useDebounce;
@@ -14852,7 +14788,6 @@ exports.useRelayPagination = useRelayPagination;
 exports.useResize = useResize;
 exports.useScrollBlock = useScrollBlock;
 exports.useScrollDetection = useScrollDetection;
-exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useSessionStorage = useSessionStorage;
 exports.useSessionStorageReducer = useSessionStorageReducer;
 exports.useSheet = useSheet;

package/index.esm.js

@@ -13661,99 +13661,6 @@ const useContainerBreakpoints = (ref, options = {}) => {
     return containerSize;
 };
 
-/**
- * Hook for managing timeouts.
- *
- * @param {object} options - Options for the useTimeout hook.
- * @param {Function} options.onTimeout - Callback function to execute on timeout.
- * @param {number} options.duration - Duration of the timeout in milliseconds.
- * @returns {object} An object containing functions to start and stop the timeout.
- */
-const useTimeout = ({ onTimeout, duration, }) => {
-    const ready = useRef(false);
-    const timeout = useRef(null);
-    const callback = useRef(onTimeout);
-    const startTimeout = useCallback(() => {
-        ready.current = false;
-        if (timeout.current) {
-            clearTimeout(timeout.current);
-        }
-        timeout.current = setTimeout(() => {
-            ready.current = true;
-            callback.current();
-        }, duration);
-    }, [duration]);
-    const stopTimeout = useCallback(() => {
-        ready.current = null;
-        if (timeout.current) {
-            clearTimeout(timeout.current);
-        }
-    }, []);
-    useEffect(() => {
-        // Use the latest callback function provided by the parent component.
-        callback.current = onTimeout;
-    }, [onTimeout]);
-    useEffect(() => {
-        // Cleanup function to clear the timeout when component unmounts
-        return () => {
-            if (timeout.current) {
-                clearTimeout(timeout.current);
-            }
-        };
-    }, []);
-    return useMemo(() => ({ startTimeout, stopTimeout }), [startTimeout, stopTimeout]);
-};
-
-/**
- * Hook for continuous retries with a timeout mechanism.
- *
- * @param {object} options - Options for the useContinuousTimeout hook.
- * @param {Function} options.onTimeout - Callback function to execute on each timeout.
- * @param {Function} options.onMaxRetries - Callback function to execute when the maximum number of retries is reached.
- * @param {number} options.duration - Duration of the timeout in milliseconds.
- * @param {number} options.maxRetries - Maximum number of retry attempts.
- * @returns {object} An object containing functions to start and stop the timeout, current retry count, and the timeout status.
- */
-const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries, }) => {
-    const retries = useRef(0);
-    const [isRunning, setIsRunning] = useState(false); // Track the timeout status
-    const { startTimeout, stopTimeout } = useTimeout({
-        duration,
-        onTimeout: () => {
-            if (isRunning) {
-                onTimeout();
-                if (retries.current < maxRetries) {
-                    retries.current++;
-                }
-                else {
-                    onMaxRetries?.();
-                    retries.current = 0;
-                }
-                startTimeout(); // Restart the timeout if it's still running
-            }
-        },
-    });
-    const stopTimeouts = useCallback(() => {
-        stopTimeout();
-        setIsRunning(false); // Update the status when stopped
-    }, [stopTimeout]);
-    const startTimeouts = useCallback(() => {
-        if (isRunning) {
-            return; // Prevent multiple timeouts from running
-        }
-        startTimeout();
-        setIsRunning(true); // Update the status when started
-    }, [isRunning, startTimeout]);
-    return useMemo(() => ({
-        startTimeouts,
-        stopTimeouts,
-        isRunning,
-        get retries() {
-            return retries.current;
-        },
-    }), [startTimeouts, stopTimeouts, isRunning]);
-};
-
 // Copied from https://github.com/rexxars/use-device-pixel-ratio
 /**
  * Get the device pixel ratio, potentially rounded and capped.
@@ -14534,19 +14441,6 @@ const getWindowSize = () => {
     }
 };
 
-/**
- * A useRef that updates its given value whenever it changes.
- *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
- */
-const useSelfUpdatingRef = (initialState) => {
-    const stateRef = useRef(initialState);
-    useEffect(() => {
-        stateRef.current = initialState;
-    }, [initialState]);
-    return stateRef;
-};
-
 /**
  * Hook for filtering a list of items by text search, client side search in a list.
  *
@@ -14568,6 +14462,49 @@ function useTextSearch(items, props) {
     return useMemo(() => [result, searchText, setSearchText], [result, searchText, setSearchText]);
 }
 
+/**
+ * Hook for managing timeouts.
+ *
+ * @param {object} options - Options for the useTimeout hook.
+ * @param {Function} options.onTimeout - Callback function to execute on timeout.
+ * @param {number} options.duration - Duration of the timeout in milliseconds.
+ * @returns {object} An object containing functions to start and stop the timeout.
+ */
+const useTimeout = ({ onTimeout, duration, }) => {
+    const ready = useRef(false);
+    const timeout = useRef(null);
+    const callback = useRef(onTimeout);
+    const startTimeout = useCallback(() => {
+        ready.current = false;
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
+    const stopTimeout = useCallback(() => {
+        ready.current = null;
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+    }, []);
+    useEffect(() => {
+        // Use the latest callback function provided by the parent component.
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    useEffect(() => {
+        // Cleanup function to clear the timeout when component unmounts
+        return () => {
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
+        };
+    }, []);
+    return useMemo(() => ({ startTimeout, stopTimeout }), [startTimeout, stopTimeout]);
+};
+
 const canUseMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 const getViewportBreakpointState = () => {
     if (!canUseMatchMedia())
@@ -14673,4 +14610,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/migrations/assets/react-router-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-router-components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,8 +9,8 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "2.6.9",
     "@trackunit/i18n-library-translation": "2.13.1",
-    "@trackunit/react-components": "4.2.0",
-    "@trackunit/react-drawer": "2.16.0",
+    "@trackunit/react-components": "5.0.0",
+    "@trackunit/react-drawer": "2.16.1",
     "@trackunit/shared-utils": "1.22.9",
     "dequal": "^2.0.3",
     "zod": "^3.25.76"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",

package/src/index.d.ts

@@ -130,7 +130,6 @@ export * from "./hooks/persistence/useStripForeignIdentityHash";
 export * from "./hooks/useBidirectionalScroll";
 export * from "./hooks/useClickOutside";
 export * from "./hooks/useContainerBreakpoints";
-export * from "./hooks/useContinuousTimeout";
 export * from "./hooks/useCopyToClipboard";
 export * from "./hooks/useDebounce";
 export * from "./hooks/useDevicePixelRatio";
@@ -152,7 +151,6 @@ export * from "./hooks/useRelayPagination";
 export * from "./hooks/useResize";
 export * from "./hooks/useScrollBlock";
 export * from "./hooks/useScrollDetection";
-export * from "./hooks/useSelfUpdatingRef";
 export * from "./hooks/useTextSearch";
 export * from "./hooks/useTimeout";
 export * from "./hooks/useViewportBreakpoints";

package/src/hooks/useContinuousTimeout.d.ts

@@ -1,22 +0,0 @@
-import { UseTimeoutProps } from "./useTimeout";
-interface UseContinuousTimeoutProps extends UseTimeoutProps {
-    maxRetries: number;
-    onMaxRetries?: () => void;
-}
-/**
- * Hook for continuous retries with a timeout mechanism.
- *
- * @param {object} options - Options for the useContinuousTimeout hook.
- * @param {Function} options.onTimeout - Callback function to execute on each timeout.
- * @param {Function} options.onMaxRetries - Callback function to execute when the maximum number of retries is reached.
- * @param {number} options.duration - Duration of the timeout in milliseconds.
- * @param {number} options.maxRetries - Maximum number of retry attempts.
- * @returns {object} An object containing functions to start and stop the timeout, current retry count, and the timeout status.
- */
-export declare const useContinuousTimeout: ({ onTimeout, onMaxRetries, duration, maxRetries, }: UseContinuousTimeoutProps) => {
-    startTimeouts: () => void;
-    stopTimeouts: () => void;
-    isRunning: boolean;
-    retries: number;
-};
-export {};

package/src/hooks/useSelfUpdatingRef.d.ts

@@ -1,7 +0,0 @@
-import { RefObject } from "react";
-/**
- * A useRef that updates its given value whenever it changes.
- *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
- */
-export declare const useSelfUpdatingRef: <TState>(initialState: TState) => RefObject<TState>;