@trackunit/react-components 1.10.40 → 1.10.43

package/index.cjs.js

@@ -1334,34 +1334,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] = react.useState(false);
-    const [debouncedHovering, setDebouncedHovering] = react.useState(false);
-    react.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] = react.useState(false);
+    const [debouncedIsHovering, setDebouncedIsHovering] = react.useState(false);
     const onMouseEnter = react.useCallback(() => {
-        setHovering(true);
+        setIsHovering(true);
     }, []);
     const onMouseLeave = react.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
+    react.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
+    react.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 react.useMemo(() => ({
         onMouseEnter,
         onMouseLeave,
-        hovering: debouncedHovering,
-    }), [onMouseEnter, onMouseLeave, debouncedHovering]);
+        hovering: value,
+    }), [onMouseEnter, onMouseLeave, value]);
 };
 
 const OVERSCAN = 10;
@@ -1391,10 +1397,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 = react.useCallback((virtualizer) => {
         onChange?.(virtualizer);
     }, [onChange]);
     const handleEstimateSize = react.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 = reactVirtual.useVirtualizer({
         count,
         getScrollElement: () => scrollElementRef.current,
@@ -1443,8 +1452,10 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
  */
 const useIsFirstRender = () => {
     const [isFirstRender, setIsFirstRender] = react.useState(true);
-    react.useEffect(() => {
-        setIsFirstRender(false);
+    react.useLayoutEffect(() => {
+        queueMicrotask(() => {
+            setIsFirstRender(false);
+        });
     }, []);
     return isFirstRender;
 };
@@ -1516,27 +1527,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] = react.useState(null);
     const [geometry, setGeometry] = react.useState(undefined);
     const observerRef = react.useRef(null);
     const onChangeRef = react.useRef(onChange);
     const isInitialRender = react.useRef(true);
-    onChangeRef.current = onChange;
+    // Callback ref to track the element
+    const ref = react.useCallback((node) => {
+        setElement(node);
+    }, []);
     const disconnectObserver = () => {
         if (observerRef.current !== null) {
             observerRef.current.disconnect();
             observerRef.current = null;
         }
     };
+    react.useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
     react.useEffect(() => {
         if (skip || element === null) {
             return;
         }
         const updateGeometry = (rect) => {
-            const newGeometry = esToolkit.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 (esToolkit.isEqual(prevGeometry, newGeometry)) {
                     return prevGeometry;
@@ -1562,48 +1597,72 @@ const useMeasureShared = (element, { skip = false, onChange } = {}) => {
         updateGeometry(initialRect);
         return disconnectObserver;
     }, [element, skip]);
-    return geometry;
+    return react.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] = react.useState(null);
-    // Callback ref to track the element
-    const ref = react.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 = react.useRef(undefined);
+    const refsRef = react.useRef(refs);
+    react.useEffect(() => {
+        refsRef.current = refs;
+    }, [refs]);
+    const refEffect = react.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 react.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
@@ -1643,22 +1702,24 @@ const useRelayPagination = ({ onReset, pageSize } = { pageSize: defaultPageSize
     const [variables, setVariables] = react.useState({ first: pageSize });
     const [pageInfo, setPageInfo] = react.useState();
     const [isLoading, setIsLoading] = react.useState(true);
+    // Destructure pageInfo properties early to avoid depending on the entire object
+    const { hasNextPage, endCursor, hasPreviousPage, startCursor } = pageInfo ?? {};
     const nextPage = react.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 = react.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 = react.useCallback(() => {
         setVariables({
             last: undefined,
@@ -1873,21 +1934,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] = react.useState(null);
     const [isScrollable, setIsScrollable] = react.useState(false);
     const [isAtBeginning, setIsAtBeginning] = react.useState(true);
     const [isAtEnd, setIsAtEnd] = react.useState(false);
     const [scrollPosition, setScrollPosition] = react.useState({ start: 0, end: 0 });
     const observerRef = react.useRef(null);
     const isFirstRender = useIsFirstRender();
+    // Callback ref to track the element
+    const ref = react.useCallback((node) => {
+        setElement(node);
+    }, []);
     const checkScrollable = react.useCallback(() => {
-        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1901,9 +1972,8 @@ const useScrollDetection = (elementRef, options) => {
             }
             return prev;
         });
-    }, [elementRef, direction]);
+    }, [element, direction]);
     const checkScrollPosition = react.useCallback(() => {
-        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1925,8 +1995,16 @@ const useScrollDetection = (elementRef, options) => {
             setIsAtEnd(newIsAtEnd);
             setScrollPosition(newScrollPosition);
         }
-    }, [elementRef, direction]);
+    }, [element, direction]);
     const debouncedCheckScrollPosition = usehooksTs.useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    const checkScrollableRef = react.useRef(checkScrollable);
+    react.useEffect(() => {
+        checkScrollableRef.current = checkScrollable;
+    }, [checkScrollable]);
+    const checkScrollPositionRef = react.useRef(checkScrollPosition);
+    react.useEffect(() => {
+        checkScrollPositionRef.current = checkScrollPosition;
+    }, [checkScrollPosition]);
     // Notify about state changes whenever any state value changes
     react.useEffect(() => {
         if (isFirstRender) {
@@ -1940,19 +2018,15 @@ const useScrollDetection = (elementRef, options) => {
         });
     }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
     react.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);
@@ -1962,8 +2036,8 @@ const useScrollDetection = (elementRef, options) => {
             }
             element.removeEventListener("scroll", debouncedCheckScrollPosition);
         };
-    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition, skip]);
-    return react.useMemo(() => ({ isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
+    }, [element, debouncedCheckScrollPosition, skip]);
+    return react.useMemo(() => ({ ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
 };
 
 /**
@@ -2016,24 +2090,28 @@ const useViewportBreakpoints = (options = {}) => {
         }), { ...defaultBreakpointState });
         setViewportSize(newViewportSize);
     }, []);
+    const updateViewportSizeRef = react.useRef(updateViewportSize);
+    react.useEffect(() => {
+        updateViewportSizeRef.current = updateViewportSize;
+    }, [updateViewportSize]);
     react.useEffect(() => {
         if (skip) {
             return;
         }
         // Initial check
-        updateViewportSize();
+        updateViewportSizeRef.current();
         // Set up listeners for each breakpoint
         const mediaQueryLists = sharedUtils.objectEntries(uiDesignTokens.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;
 };
 
@@ -2051,11 +2129,15 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
         setFocused(hasFocus());
         onBlur?.();
     }, [onBlur]);
+    const setFocusedRef = react.useRef(setFocused);
+    react.useEffect(() => {
+        setFocusedRef.current = setFocused;
+    }, [setFocused]);
     react.useEffect(() => {
         if (skip) {
             return;
         }
-        setFocused(hasFocus()); // Focus for additional renders
+        setFocusedRef.current(hasFocus());
         window.addEventListener("focus", onFocusInternal);
         window.addEventListener("blur", onBlurInternal);
         return () => {
@@ -2969,16 +3051,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 = react.Children.toArray(children);
-    const containerRef = react.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({
@@ -2988,23 +3074,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 (jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: containerRef, children: childrenArray.map((child, index) => (jsxRuntime.jsx(react.Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    return (jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: mergedRef, children: childrenArray.map((child, index) => (jsxRuntime.jsx(react.Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
 const PADDING = 12;
@@ -3314,12 +3401,14 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
     const context = usePopoverContext();
     const ref = react$1.useMergeRefs([context.refs.setReference, propRef]);
     if (!renderButton && react.isValidElement(children)) {
-        return react.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 react.cloneElement(children, cloneProps);
     }
     return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
@@ -4133,7 +4222,10 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const isAtTop = react.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 = react.useMemo(() => (containerRef.current ? totalSize >= containerRef.current.clientHeight : false), [totalSize]);
+    const contentFillsContainer = react.useMemo(() => {
+        // eslint-disable-next-line react-hooks/refs
+        return containerRef.current ? totalSize >= containerRef.current.clientHeight : false;
+    }, [totalSize]);
     return {
         ...virtualizer,
         containerRef,
@@ -4799,12 +4891,20 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPa
     if (!loading && pageCount === undefined) {
         throw Error("Pagination should be provided with a pageCount");
     }
+    const setCurrentPageRef = react.useRef(setCurrentPage);
+    react.useEffect(() => {
+        setCurrentPageRef.current = setCurrentPage;
+    }, [setCurrentPage]);
+    const setPageRef = react.useRef(setPage);
+    react.useEffect(() => {
+        setPageRef.current = setPage;
+    }, [setPage]);
     react.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 = react.useCallback((action) => {
         const from = page;
         let to = from;
@@ -5304,17 +5404,25 @@ const cvaToggleItemContent = cssClassVarianceUtilities.cvaMerge([], {
  */
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     const [isMounted, setIsMounted] = react.useState(false);
+    const [slidingLeft, setSlidingLeft] = react.useState(0);
+    const [slidingWidth, setSlidingWidth] = react.useState(0);
     const buttonRefs = react.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;
-    react.useEffect(() => {
-        setIsMounted(true);
+    react.useLayoutEffect(() => {
+        queueMicrotask(() => {
+            setIsMounted(true);
+        });
     }, []);
+    react.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 (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, style: 
         // eslint-disable-next-line local-rules/no-typescript-assertion
         {
@@ -5613,7 +5721,7 @@ exports.useIsTextTruncated = useIsTextTruncated;
 exports.useList = useList;
 exports.useListItemHeight = useListItemHeight;
 exports.useMeasure = useMeasure;
-exports.useMeasureElement = useMeasureElement;
+exports.useMergeRefs = useMergeRefs;
 exports.useModifierKey = useModifierKey;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;