@trackunit/react-components 1.10.42 → 1.10.43

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, forwardRef, Fragment, memo, Children, isValidElement, cloneElement, createContext, useContext, useLayoutEffect } from 'react';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, useLayoutEffect, forwardRef, Fragment, memo, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -14,7 +14,7 @@ import { isEqual, omit } from 'es-toolkit';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useDebounceCallback, useCopyToClipboard } from 'usehooks-ts';
 import { Link, useBlocker } from '@tanstack/react-router';
-import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { twMerge } from 'tailwind-merge';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
@@ -1332,34 +1332,40 @@ const useElevatedState = (initialState, customState) => {
  * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
-    const [hovering, setHovering] = useState(false);
-    const [debouncedHovering, setDebouncedHovering] = useState(false);
-    useEffect(() => {
-        if (!debounced) {
-            setDebouncedHovering(hovering);
-            return undefined;
-        }
-        const shouldDebounce = direction === "both" || (direction === "in" && hovering) || (direction === "out" && !hovering);
-        if (shouldDebounce) {
-            const timer = setTimeout(() => {
-                setDebouncedHovering(hovering);
-            }, delay);
-            return () => clearTimeout(timer);
-        }
-        setDebouncedHovering(hovering);
-        return undefined;
-    }, [debounced, direction, delay, hovering]);
+    const [isHovering, setIsHovering] = useState(false);
+    const [debouncedIsHovering, setDebouncedIsHovering] = useState(false);
     const onMouseEnter = useCallback(() => {
-        setHovering(true);
+        setIsHovering(true);
     }, []);
     const onMouseLeave = useCallback(() => {
-        setHovering(false);
+        setIsHovering(false);
     }, []);
+    // Determine if the current transition should be debounced based on direction
+    const isTransitionDebounced = debounced && (direction === "both" || (direction === "in" && isHovering) || (direction === "out" && !isHovering));
+    // Sync debouncedIsHovering immediately for non-debounced transitions
+    useLayoutEffect(() => {
+        if (!debounced || isTransitionDebounced) {
+            return undefined;
+        }
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Synchronizing derived state for directional debouncing
+        setDebouncedIsHovering(isHovering);
+    }, [debounced, isTransitionDebounced, isHovering]);
+    // Apply delay for debounced transitions
+    useEffect(() => {
+        if (!isTransitionDebounced) {
+            return undefined;
+        }
+        const timer = setTimeout(() => {
+            setDebouncedIsHovering(isHovering);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [isTransitionDebounced, delay, isHovering]);
+    const value = debounced ? (isTransitionDebounced ? debouncedIsHovering : isHovering) : isHovering;
     return useMemo(() => ({
         onMouseEnter,
         onMouseLeave,
-        hovering: debouncedHovering,
-    }), [onMouseEnter, onMouseLeave, debouncedHovering]);
+        hovering: value,
+    }), [onMouseEnter, onMouseLeave, value]);
 };
 
 const OVERSCAN = 10;
@@ -1389,10 +1395,13 @@ const DEFAULT_ROW_HEIGHT = 50;
  * });
  */
 const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize, overscan, onChange, skip = false, }) => {
+    "use no memo"; //! TODO: remove this once Tanstack Virtual is updated to support React Compiler
     const handleChange = useCallback((virtualizer) => {
         onChange?.(virtualizer);
     }, [onChange]);
     const handleEstimateSize = useCallback((index) => estimateSize?.(index) ?? DEFAULT_ROW_HEIGHT, [estimateSize]);
+    //! TODO: remove this once Tanstack Virtual is updated to support React Compiler
+    // eslint-disable-next-line react-hooks/incompatible-library
     const rowVirtualizer = useVirtualizer({
         count,
         getScrollElement: () => scrollElementRef.current,
@@ -1441,8 +1450,10 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
  */
 const useIsFirstRender = () => {
     const [isFirstRender, setIsFirstRender] = useState(true);
-    useEffect(() => {
-        setIsFirstRender(false);
+    useLayoutEffect(() => {
+        queueMicrotask(() => {
+            setIsFirstRender(false);
+        });
     }, []);
     return isFirstRender;
 };
@@ -1514,27 +1525,51 @@ const useIsTextTruncated = (text, { skip = false } = {}) => {
 };
 
 /**
- * Shared measurement logic used by both useMeasure and useMeasureElement.
- * This hook observes an element and measures its geometry.
+ * Custom hook to measure the geometry of an element using a callback ref.
+ * Measures the size and position of the element relative to the viewport.
+ *
+ * @template TElement extends HTMLElement
+ * @returns {UseMeasureResult<HTMLElement>} An object containing `geometry`, `ref` callback, and `element`.
+ * @example
+ * ```tsx
+ * const { geometry, ref } = useMeasure();
+ * return <div ref={ref}>Width: {geometry.width}</div>;
+ * ```
  */
-const useMeasureShared = (element, { skip = false, onChange } = {}) => {
+const useMeasure = ({ skip = false, onChange, } = {}) => {
+    const [element, setElement] = useState(null);
     const [geometry, setGeometry] = useState(undefined);
     const observerRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const isInitialRender = useRef(true);
-    onChangeRef.current = onChange;
+    // Callback ref to track the element
+    const ref = useCallback((node) => {
+        setElement(node);
+    }, []);
     const disconnectObserver = () => {
         if (observerRef.current !== null) {
             observerRef.current.disconnect();
             observerRef.current = null;
         }
     };
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
     useEffect(() => {
         if (skip || element === null) {
             return;
         }
         const updateGeometry = (rect) => {
-            const newGeometry = omit(rect, ["toJSON"]);
+            const newGeometry = {
+                width: rect.width,
+                height: rect.height,
+                top: rect.top,
+                bottom: rect.bottom,
+                left: rect.left,
+                right: rect.right,
+                x: rect.x,
+                y: rect.y,
+            };
             setGeometry(prevGeometry => {
                 if (isEqual(prevGeometry, newGeometry)) {
                     return prevGeometry;
@@ -1560,48 +1595,72 @@ const useMeasureShared = (element, { skip = false, onChange } = {}) => {
         updateGeometry(initialRect);
         return disconnectObserver;
     }, [element, skip]);
-    return geometry;
+    return useMemo(() => ({ geometry, ref, element }), [geometry, ref, element]);
 };
 
+// This hook is _heavily_ inspired by floating-ui's useMergeRefs
 /**
- * Custom hook to measure the geometry of an element using a callback ref.
- * Measures the size and position of the element relative to the viewport.
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ * Useful when you need to attach multiple refs to the same element,
+ * such as when composing multiple hooks that each need a ref.
  *
- * @returns {UseMeasureResult<HTMLElement>} An object containing `geometry`, `ref` callback, and `element`.
- * @template TElement extends HTMLElement
+ * @template TInstance - The type of the element instance
+ * @param {ReadonlyArray<MergeableRef<TInstance> | undefined>} refs - Array of refs to merge (can be RefObjects, RefCallbacks, or undefined)
+ * @returns {null | RefCallback<TInstance>} A single ref callback that will update all provided refs, or null if all refs are null
  * @example
  * ```tsx
- * const { geometry, ref } = useMeasure();
- * return <div ref={ref}>Width: {geometry.width}</div>;
- * ```
- */
-const useMeasure = ({ skip = false, onChange, } = {}) => {
-    const [element, setElement] = useState(null);
-    // Callback ref to track the element
-    const ref = useCallback((node) => {
-        setElement(node);
-    }, []);
-    const geometry = useMeasureShared(element, { skip, onChange });
-    return { geometry, ref, element };
-};
-
-/**
- * Custom hook to measure the geometry of an element from a RefObject.
- * Use this when you already have a ref (e.g., from useRef or for composition with other hooks).
- * Measures the size and position of the element relative to the viewport.
+ * const { ref: measureRef } = useMeasure();
+ * const { ref: scrollRef } = useScrollDetection();
+ * const mergedRef = useMergeRefs([measureRef, scrollRef]);
  *
- * @param ref - RefObject pointing to the element to measure
- * @returns {Geometry} The geometry of the element
- * @example
- * ```tsx
- * const ref = useRef<HTMLDivElement>(null);
- * const geometry = useMeasureElement(ref);
- * return <div ref={ref}>Width: {geometry.width}</div>;
+ * return <div ref={mergedRef}>Content</div>;
  * ```
  */
-const useMeasureElement = (ref, { skip = false, onChange } = {}) => {
-    return useMeasureShared(ref.current, { skip, onChange });
-};
+function useMergeRefs(refs) {
+    const cleanupRef = useRef(undefined);
+    const refsRef = useRef(refs);
+    useEffect(() => {
+        refsRef.current = refs;
+    }, [refs]);
+    const refEffect = useCallback((instance) => {
+        const cleanups = refsRef.current.map(ref => {
+            if (ref === null || ref === undefined) {
+                return;
+            }
+            if (typeof ref === "function") {
+                const refCallback = ref;
+                const refCleanup = refCallback(instance);
+                return typeof refCleanup === "function"
+                    ? refCleanup
+                    : () => {
+                        refCallback(null);
+                    };
+            }
+            ref.current = instance;
+            return () => {
+                ref.current = null;
+            };
+        });
+        return () => {
+            cleanups.forEach(refCleanup => refCleanup?.());
+        };
+    }, []);
+    return useMemo(() => {
+        // eslint-disable-next-line react-hooks/refs
+        if (refsRef.current.every(ref => ref === null)) {
+            return null;
+        }
+        return (value) => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = undefined;
+            }
+            if (value !== null) {
+                cleanupRef.current = refEffect(value);
+            }
+        };
+    }, [refEffect]);
+}
 
 /**
  * Hook that returns true if any modifier key (Ctrl, Alt, Shift, Meta/Cmd) is pressed
@@ -1641,22 +1700,24 @@ const useRelayPagination = ({ onReset, pageSize } = { pageSize: defaultPageSize
     const [variables, setVariables] = useState({ first: pageSize });
     const [pageInfo, setPageInfo] = useState();
     const [isLoading, setIsLoading] = useState(true);
+    // Destructure pageInfo properties early to avoid depending on the entire object
+    const { hasNextPage, endCursor, hasPreviousPage, startCursor } = pageInfo ?? {};
     const nextPage = useCallback(() => {
-        if (pageInfo?.hasNextPage === true) {
+        if (hasNextPage === true) {
             setVariables({
-                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
+                after: endCursor === null ? undefined : endCursor,
                 first: pageSize,
             });
         }
-    }, [pageInfo?.endCursor, pageInfo?.hasNextPage, pageSize]);
+    }, [hasNextPage, endCursor, pageSize]);
     const previousPage = useCallback(() => {
-        if (pageInfo?.hasPreviousPage === true) {
+        if (hasPreviousPage === true) {
             setVariables({
-                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
+                before: startCursor === null ? undefined : startCursor,
                 last: pageSize,
             });
         }
-    }, [pageInfo?.hasPreviousPage, pageInfo?.startCursor, pageSize]);
+    }, [hasPreviousPage, startCursor, pageSize]);
     const reset = useCallback(() => {
         setVariables({
             last: undefined,
@@ -1871,21 +1932,31 @@ const useScrollBlock = (scrollContainer = typeof document !== "undefined" ? docu
 const SCROLL_DEBOUNCE_TIME = 50;
 /**
  * Hook for detecting scroll values in horizontal or vertical direction.
+ * Returns a ref callback to attach to the element you want to observe.
  *
- * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
  * @param {object} options - Options object containing direction, onScrollStateChange callback, and skip
- * @returns {object} An object containing if the element is scrollable, is at the beginning, is at the end, and its current scroll position.
+ * @returns {object} An object containing ref callback, element, and scroll state (isScrollable, isAtBeginning, isAtEnd, scrollPosition)
+ * @template TElement extends HTMLElement
+ * @example
+ * ```tsx
+ * const { ref, isScrollable, isAtBeginning } = useScrollDetection({ direction: "horizontal" });
+ * return <div ref={ref}>Scrollable content</div>;
+ * ```
  */
-const useScrollDetection = (elementRef, options) => {
+const useScrollDetection = (options) => {
     const { direction = "vertical", onScrollStateChange, skip = false } = options ?? {};
+    const [element, setElement] = useState(null);
     const [isScrollable, setIsScrollable] = useState(false);
     const [isAtBeginning, setIsAtBeginning] = useState(true);
     const [isAtEnd, setIsAtEnd] = useState(false);
     const [scrollPosition, setScrollPosition] = useState({ start: 0, end: 0 });
     const observerRef = useRef(null);
     const isFirstRender = useIsFirstRender();
+    // Callback ref to track the element
+    const ref = useCallback((node) => {
+        setElement(node);
+    }, []);
     const checkScrollable = useCallback(() => {
-        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1899,9 +1970,8 @@ const useScrollDetection = (elementRef, options) => {
             }
             return prev;
         });
-    }, [elementRef, direction]);
+    }, [element, direction]);
     const checkScrollPosition = useCallback(() => {
-        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1923,8 +1993,16 @@ const useScrollDetection = (elementRef, options) => {
             setIsAtEnd(newIsAtEnd);
             setScrollPosition(newScrollPosition);
         }
-    }, [elementRef, direction]);
+    }, [element, direction]);
     const debouncedCheckScrollPosition = useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    const checkScrollableRef = useRef(checkScrollable);
+    useEffect(() => {
+        checkScrollableRef.current = checkScrollable;
+    }, [checkScrollable]);
+    const checkScrollPositionRef = useRef(checkScrollPosition);
+    useEffect(() => {
+        checkScrollPositionRef.current = checkScrollPosition;
+    }, [checkScrollPosition]);
     // Notify about state changes whenever any state value changes
     useEffect(() => {
         if (isFirstRender) {
@@ -1938,19 +2016,15 @@ const useScrollDetection = (elementRef, options) => {
         });
     }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
     useEffect(() => {
-        if (skip) {
-            return;
-        }
-        const element = elementRef?.current;
-        if (!element) {
+        if (skip || !element) {
             return;
         }
         // Initial checks
-        checkScrollable();
-        checkScrollPosition();
+        checkScrollableRef.current();
+        checkScrollPositionRef.current();
         observerRef.current = new ResizeObserver(() => {
-            checkScrollable();
-            checkScrollPosition();
+            checkScrollableRef.current();
+            checkScrollPositionRef.current();
         });
         observerRef.current.observe(element);
         element.addEventListener("scroll", debouncedCheckScrollPosition);
@@ -1960,8 +2034,8 @@ const useScrollDetection = (elementRef, options) => {
             }
             element.removeEventListener("scroll", debouncedCheckScrollPosition);
         };
-    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition, skip]);
-    return useMemo(() => ({ isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
+    }, [element, debouncedCheckScrollPosition, skip]);
+    return useMemo(() => ({ ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
 };
 
 /**
@@ -2014,24 +2088,28 @@ const useViewportBreakpoints = (options = {}) => {
         }), { ...defaultBreakpointState });
         setViewportSize(newViewportSize);
     }, []);
+    const updateViewportSizeRef = useRef(updateViewportSize);
+    useEffect(() => {
+        updateViewportSizeRef.current = updateViewportSize;
+    }, [updateViewportSize]);
     useEffect(() => {
         if (skip) {
             return;
         }
         // Initial check
-        updateViewportSize();
+        updateViewportSizeRef.current();
         // Set up listeners for each breakpoint
         const mediaQueryLists = objectEntries(themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
         mediaQueryLists.forEach(mql => {
-            mql.addEventListener("change", updateViewportSize);
+            mql.addEventListener("change", updateViewportSizeRef.current);
         });
         // Cleanup
         return () => {
             mediaQueryLists.forEach(mql => {
-                mql.removeEventListener("change", updateViewportSize);
+                mql.removeEventListener("change", updateViewportSizeRef.current);
             });
         };
-    }, [updateViewportSize, skip]);
+    }, [skip]);
     return viewportSize;
 };
 
@@ -2049,11 +2127,15 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
         setFocused(hasFocus());
         onBlur?.();
     }, [onBlur]);
+    const setFocusedRef = useRef(setFocused);
+    useEffect(() => {
+        setFocusedRef.current = setFocused;
+    }, [setFocused]);
     useEffect(() => {
         if (skip) {
             return;
         }
-        setFocused(hasFocus()); // Focus for additional renders
+        setFocusedRef.current(hasFocus());
         window.addEventListener("focus", onFocusInternal);
         window.addEventListener("blur", onBlurInternal);
         return () => {
@@ -2967,16 +3049,20 @@ const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, })
 };
 
 /**
- * Container for displaying components in a horizontal layout with overflow detection
+ * Container for displaying components in a horizontal layout with overflow detection.
+ * Provides visual indicators when content overflows and can be scrolled.
  *
- * @param {HorizontalOverflowScrollerProps} props - The props for the component
- * @returns {Element} HorizontalOverflowScroller component
+ * @param props - Component properties
+ * @param props.children - The content to display in the horizontal scroller
+ * @param props.className - Optional CSS class name for styling
+ * @param props.dataTestId - Optional test ID for testing purposes
+ * @param props.onScrollStateChange - Optional callback fired when scroll state changes
+ * @returns {ReactElement} A horizontal overflow scroller component with visual indicators
  */
 const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollStateChange, }) => {
     const childrenArray = Children.toArray(children);
-    const containerRef = useRef(null);
-    const containerGeometry = useMeasureElement(containerRef);
-    const { isScrollable, isAtBeginning, isAtEnd } = useScrollDetection(containerRef, {
+    const { geometry: containerGeometry, ref: measureRef, element } = useMeasure();
+    const { ref: scrollRef, isScrollable, isAtBeginning, isAtEnd, } = useScrollDetection({
         direction: "horizontal",
         onScrollStateChange: onScrollStateChange
             ? (state) => onScrollStateChange({
@@ -2986,23 +3072,24 @@ const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollS
             })
             : undefined,
     });
+    const mergedRef = useMergeRefs([measureRef, scrollRef]);
     const handleScrollLeft = () => {
-        if (!containerRef.current || containerGeometry?.width === undefined)
+        if (!element || containerGeometry?.width === undefined)
             return;
-        containerRef.current.scrollBy({
+        element.scrollBy({
             left: -containerGeometry.width,
             behavior: "smooth",
         });
     };
     const handleScrollRight = () => {
-        if (!containerRef.current || containerGeometry?.width === undefined)
+        if (!element || containerGeometry?.width === undefined)
             return;
-        containerRef.current.scrollBy({
+        element.scrollBy({
             left: containerGeometry.width,
             behavior: "smooth",
         });
     };
-    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: containerRef, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
 const PADDING = 12;
@@ -3282,7 +3369,7 @@ const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
  */
 const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
-    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    const ref = useMergeRefs$1([context.refs.setFloating, propRef]);
     return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps.dataTestId ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
@@ -3310,14 +3397,16 @@ const PopoverTitle = ({ children, action, divider = false, className, dataTestId
  */
 const PopoverTrigger = function PopoverTrigger({ children, renderButton = false, ref: propRef, ...props }) {
     const context = usePopoverContext();
-    const ref = useMergeRefs([context.refs.setReference, propRef]);
+    const ref = useMergeRefs$1([context.refs.setReference, propRef]);
     if (!renderButton && isValidElement(children)) {
-        return cloneElement(children, context.getReferenceProps({
-            ref,
+        const referenceProps = context.getReferenceProps({
             ...props,
             ...children.props,
             "data-state": context.isOpen === true ? "open" : "closed",
-        }));
+        });
+        const cloneProps = { ...referenceProps };
+        cloneProps.ref = ref;
+        return cloneElement(children, cloneProps);
     }
     return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
@@ -4131,7 +4220,10 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const isAtTop = useMemo(() => virtualizer.scrollOffset === 0, [virtualizer.scrollOffset]);
     // totalSize must be out from from useMemo since otherwise we'll not be able to have the  the totalSize as a dependency for the contentFillsContainer
     const totalSize = virtualizer.getTotalSize();
-    const contentFillsContainer = useMemo(() => (containerRef.current ? totalSize >= containerRef.current.clientHeight : false), [totalSize]);
+    const contentFillsContainer = useMemo(() => {
+        // eslint-disable-next-line react-hooks/refs
+        return containerRef.current ? totalSize >= containerRef.current.clientHeight : false;
+    }, [totalSize]);
     return {
         ...virtualizer,
         containerRef,
@@ -4797,12 +4889,20 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPa
     if (!loading && pageCount === undefined) {
         throw Error("Pagination should be provided with a pageCount");
     }
+    const setCurrentPageRef = useRef(setCurrentPage);
+    useEffect(() => {
+        setCurrentPageRef.current = setCurrentPage;
+    }, [setCurrentPage]);
+    const setPageRef = useRef(setPage);
+    useEffect(() => {
+        setPageRef.current = setPage;
+    }, [setPage]);
     useEffect(() => {
         if (pageIndex !== undefined && (isNaN(pageIndex) || pageIndex < 0)) {
-            setPage(pageIndex);
-            setCurrentPage(String(pageIndex + 1));
+            setPageRef.current(pageIndex);
+            setCurrentPageRef.current(String(pageIndex + 1));
         }
-    }, [pageIndex, setPage, setCurrentPage, pageCount]);
+    }, [pageIndex, pageCount]);
     const handlePageChange = useCallback((action) => {
         const from = page;
         let to = from;
@@ -5302,17 +5402,25 @@ const cvaToggleItemContent = cvaMerge([], {
  */
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     const [isMounted, setIsMounted] = useState(false);
+    const [slidingLeft, setSlidingLeft] = useState(0);
+    const [slidingWidth, setSlidingWidth] = useState(0);
     const buttonRefs = useRef([]);
     const selectedIndex = list.findIndex(item => item.id === selected);
     const validIndex = selectedIndex >= 0 ? selectedIndex : 0;
-    const containerPadding = 2; // p-0.5 = 2px
-    const gap = 4;
-    const slidingLeft = containerPadding +
-        buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth ?? 0) + gap, 0);
-    const slidingWidth = buttonRefs.current[validIndex]?.offsetWidth ?? 0;
-    useEffect(() => {
-        setIsMounted(true);
+    useLayoutEffect(() => {
+        queueMicrotask(() => {
+            setIsMounted(true);
+        });
     }, []);
+    useEffect(() => {
+        const containerPadding = 2; // p-0.5 = 2px
+        const gap = 4;
+        const left = containerPadding +
+            buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth ?? 0) + gap, 0);
+        const width = buttonRefs.current[validIndex]?.offsetWidth ?? 0;
+        setSlidingLeft(left);
+        setSlidingWidth(width);
+    }, [validIndex]);
     return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, style: 
         // eslint-disable-next-line local-rules/no-typescript-assertion
         {
@@ -5487,4 +5595,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useMeasure, useMeasureElement, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.42",
+  "version": "1.10.43",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,10 +15,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.72",
-    "@trackunit/css-class-variance-utilities": "1.7.72",
-    "@trackunit/shared-utils": "1.9.72",
-    "@trackunit/ui-icons": "1.7.73",
+    "@trackunit/ui-design-tokens": "1.7.73",
+    "@trackunit/css-class-variance-utilities": "1.7.73",
+    "@trackunit/shared-utils": "1.9.73",
+    "@trackunit/ui-icons": "1.7.74",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/components/HorizontalOverflowScroller/HorizontalOverflowScroller.d.ts

@@ -13,9 +13,14 @@ export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable
     }) => void;
 }
 /**
- * Container for displaying components in a horizontal layout with overflow detection
+ * Container for displaying components in a horizontal layout with overflow detection.
+ * Provides visual indicators when content overflows and can be scrolled.
  *
- * @param {HorizontalOverflowScrollerProps} props - The props for the component
- * @returns {Element} HorizontalOverflowScroller component
+ * @param props - Component properties
+ * @param props.children - The content to display in the horizontal scroller
+ * @param props.className - Optional CSS class name for styling
+ * @param props.dataTestId - Optional test ID for testing purposes
+ * @param props.onScrollStateChange - Optional callback fired when scroll state changes
+ * @returns {ReactElement} A horizontal overflow scroller component with visual indicators
  */
 export declare const HorizontalOverflowScroller: ({ className, dataTestId, children, onScrollStateChange, }: HorizontalOverflowScrollerProps) => ReactElement;