@trackunit/react-components 1.10.17 → 1.10.19

package/index.cjs.js

@@ -1325,109 +1325,6 @@ const useElevatedState = (initialState, customState) => {
     return react.useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
-const UNINITIALIZED = Symbol("UNINITIALIZED");
-/**
- * Custom hook to get the geometry of an element.
- * Size and position of the element relative to the viewport.
- */
-const useGeometry = (ref, { skip = false, onChange } = {}) => {
-    const [geometry, setGeometry] = react.useState(() => {
-        const rect = ref.current?.getBoundingClientRect();
-        if (!rect) {
-            return {
-                width: 0,
-                height: 0,
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                x: 0,
-                y: 0,
-            };
-        }
-        return {
-            width: rect.width,
-            height: rect.height,
-            top: rect.top,
-            bottom: rect.bottom,
-            left: rect.left,
-            right: rect.right,
-            x: rect.x,
-            y: rect.y,
-        };
-    });
-    const resizeObserver = react.useRef(null);
-    const [element, setElement] = react.useState(ref.current);
-    const prevGeometry = react.useRef(UNINITIALIZED);
-    // Track changes to ref.current on every render
-    if (ref.current !== element) {
-        setElement(ref.current);
-    }
-    react.useEffect(() => {
-        if (skip || !element) {
-            return;
-        }
-        // Update geometry immediately when element changes
-        const elementRect = element.getBoundingClientRect();
-        const newGeometry = {
-            width: elementRect.width,
-            height: elementRect.height,
-            top: elementRect.top,
-            bottom: elementRect.bottom,
-            left: elementRect.left,
-            right: elementRect.right,
-            x: elementRect.x,
-            y: elementRect.y,
-        };
-        const prev = prevGeometry.current;
-        const hasChanged = prev === UNINITIALIZED ? false : !esToolkit.isEqual(newGeometry, prev);
-        if (!hasChanged && prev !== UNINITIALIZED) {
-            return;
-        }
-        setGeometry(newGeometry);
-        if (hasChanged && prev !== UNINITIALIZED) {
-            onChange?.(newGeometry);
-        }
-        prevGeometry.current = newGeometry;
-        const observe = () => {
-            if (!resizeObserver.current) {
-                resizeObserver.current = new ResizeObserver(entries => {
-                    for (const entry of entries) {
-                        const entryRect = entry.target.getBoundingClientRect();
-                        const observedGeometry = {
-                            width: entryRect.width,
-                            height: entryRect.height,
-                            top: entryRect.top,
-                            bottom: entryRect.bottom,
-                            left: entryRect.left,
-                            right: entryRect.right,
-                            x: entryRect.x,
-                            y: entryRect.y,
-                        };
-                        const prevObserved = prevGeometry.current;
-                        const hasObservedChanged = prevObserved === UNINITIALIZED ? false : !esToolkit.isEqual(observedGeometry, prevObserved);
-                        if (hasObservedChanged || prevObserved === UNINITIALIZED) {
-                            setGeometry(observedGeometry);
-                            if (hasObservedChanged && prevObserved !== UNINITIALIZED) {
-                                onChange?.(observedGeometry);
-                            }
-                            prevGeometry.current = observedGeometry;
-                        }
-                    }
-                });
-            }
-            resizeObserver.current.observe(element);
-        };
-        observe();
-        return () => {
-            if (resizeObserver.current) {
-                resizeObserver.current.disconnect();
-            }
-        };
-    }, [element, onChange, skip]);
-    return geometry;
-};
-
 /**
  * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
  * The boolean will be true if the element is being hovered, and false if it is not.
@@ -1618,6 +1515,96 @@ const useIsTextTruncated = (text, { skip = false } = {}) => {
     return react.useMemo(() => ({ ref, isTextTruncated }), [isTextTruncated]);
 };
 
+/**
+ * Shared measurement logic used by both useMeasure and useMeasureElement.
+ * This hook observes an element and measures its geometry.
+ */
+const useMeasureShared = (element, { skip = false, onChange } = {}) => {
+    const [geometry, setGeometry] = react.useState(undefined);
+    const observerRef = react.useRef(null);
+    const onChangeRef = react.useRef(onChange);
+    const isInitialRender = react.useRef(true);
+    onChangeRef.current = onChange;
+    const disconnectObserver = () => {
+        if (observerRef.current !== null) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+    };
+    react.useEffect(() => {
+        if (skip || element === null) {
+            return;
+        }
+        const updateGeometry = (rect) => {
+            const newGeometry = esToolkit.omit(rect, ["toJSON"]);
+            setGeometry(prevGeometry => {
+                if (esToolkit.isEqual(prevGeometry, newGeometry)) {
+                    return prevGeometry;
+                }
+                if (isInitialRender.current === false) {
+                    onChangeRef.current?.(newGeometry);
+                }
+                return newGeometry;
+            });
+            isInitialRender.current = false;
+        };
+        const handleResize = (entries) => {
+            for (const entry of entries) {
+                const rect = entry.target.getBoundingClientRect();
+                updateGeometry(rect);
+            }
+        };
+        disconnectObserver();
+        const observer = new ResizeObserver(handleResize);
+        observer.observe(element);
+        observerRef.current = observer;
+        const initialRect = element.getBoundingClientRect();
+        updateGeometry(initialRect);
+        return disconnectObserver;
+    }, [element, skip]);
+    return 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.
+ *
+ * @returns {UseMeasureResult<HTMLElement>} An object containing `geometry`, `ref` callback, and `element`.
+ * @template TElement extends HTMLElement
+ * @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.
+ *
+ * @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>;
+ * ```
+ */
+const useMeasureElement = (ref, { skip = false, onChange } = {}) => {
+    return useMeasureShared(ref.current, { skip, onChange });
+};
+
 /**
  * Hook that returns true if any modifier key (Ctrl, Alt, Shift, Meta/Cmd) is pressed
  *
@@ -2396,9 +2383,8 @@ const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle,
     return (jsxRuntime.jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsxRuntime.jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
 };
 const Collapsible = ({ children, expanded, id, variant, extraPadding }) => {
-    const ref = react.useRef(null);
-    const { height } = useGeometry(ref);
-    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height || "auto" : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible({ variant, extraPadding }), children: children }) }) }));
+    const { geometry, ref } = useMeasure();
+    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? (geometry?.height ?? "auto") : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible({ variant, extraPadding }), children: children }) }) }));
 };
 
 /**
@@ -2845,9 +2831,9 @@ const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, })
  * @returns {Element} HorizontalOverflowScroller component
  */
 const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollStateChange, }) => {
-    const containerRef = react.useRef(null);
     const childrenArray = react.Children.toArray(children);
-    const { width: containerWidth } = useGeometry(containerRef);
+    const containerRef = react.useRef(null);
+    const containerGeometry = useMeasureElement(containerRef);
     const { isScrollable, isAtBeginning, isAtEnd } = useScrollDetection(containerRef, {
         direction: "horizontal",
         onScrollStateChange: onScrollStateChange
@@ -2859,20 +2845,18 @@ const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollS
             : undefined,
     });
     const handleScrollLeft = () => {
-        const element = containerRef.current;
-        if (!element || !containerWidth)
+        if (!containerRef.current || containerGeometry?.width === undefined)
             return;
-        element.scrollBy({
-            left: -containerWidth,
+        containerRef.current.scrollBy({
+            left: -containerGeometry.width,
             behavior: "smooth",
         });
     };
     const handleScrollRight = () => {
-        const element = containerRef.current;
-        if (!element || !containerWidth)
+        if (!containerRef.current || containerGeometry?.width === undefined)
             return;
-        element.scrollBy({
-            left: containerWidth,
+        containerRef.current.scrollBy({
+            left: containerGeometry.width,
             behavior: "smooth",
         });
     };
@@ -5477,7 +5461,6 @@ exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
 exports.useElevatedReducer = useElevatedReducer;
 exports.useElevatedState = useElevatedState;
-exports.useGeometry = useGeometry;
 exports.useHover = useHover;
 exports.useInfiniteScroll = useInfiniteScroll;
 exports.useIsFirstRender = useIsFirstRender;
@@ -5485,6 +5468,8 @@ exports.useIsFullscreen = useIsFullscreen;
 exports.useIsTextTruncated = useIsTextTruncated;
 exports.useList = useList;
 exports.useListItemHeight = useListItemHeight;
+exports.useMeasure = useMeasure;
+exports.useMeasureElement = useMeasureElement;
 exports.useModifierKey = useModifierKey;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;

package/index.esm.js

@@ -1323,109 +1323,6 @@ const useElevatedState = (initialState, customState) => {
     return useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
-const UNINITIALIZED = Symbol("UNINITIALIZED");
-/**
- * Custom hook to get the geometry of an element.
- * Size and position of the element relative to the viewport.
- */
-const useGeometry = (ref, { skip = false, onChange } = {}) => {
-    const [geometry, setGeometry] = useState(() => {
-        const rect = ref.current?.getBoundingClientRect();
-        if (!rect) {
-            return {
-                width: 0,
-                height: 0,
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                x: 0,
-                y: 0,
-            };
-        }
-        return {
-            width: rect.width,
-            height: rect.height,
-            top: rect.top,
-            bottom: rect.bottom,
-            left: rect.left,
-            right: rect.right,
-            x: rect.x,
-            y: rect.y,
-        };
-    });
-    const resizeObserver = useRef(null);
-    const [element, setElement] = useState(ref.current);
-    const prevGeometry = useRef(UNINITIALIZED);
-    // Track changes to ref.current on every render
-    if (ref.current !== element) {
-        setElement(ref.current);
-    }
-    useEffect(() => {
-        if (skip || !element) {
-            return;
-        }
-        // Update geometry immediately when element changes
-        const elementRect = element.getBoundingClientRect();
-        const newGeometry = {
-            width: elementRect.width,
-            height: elementRect.height,
-            top: elementRect.top,
-            bottom: elementRect.bottom,
-            left: elementRect.left,
-            right: elementRect.right,
-            x: elementRect.x,
-            y: elementRect.y,
-        };
-        const prev = prevGeometry.current;
-        const hasChanged = prev === UNINITIALIZED ? false : !isEqual(newGeometry, prev);
-        if (!hasChanged && prev !== UNINITIALIZED) {
-            return;
-        }
-        setGeometry(newGeometry);
-        if (hasChanged && prev !== UNINITIALIZED) {
-            onChange?.(newGeometry);
-        }
-        prevGeometry.current = newGeometry;
-        const observe = () => {
-            if (!resizeObserver.current) {
-                resizeObserver.current = new ResizeObserver(entries => {
-                    for (const entry of entries) {
-                        const entryRect = entry.target.getBoundingClientRect();
-                        const observedGeometry = {
-                            width: entryRect.width,
-                            height: entryRect.height,
-                            top: entryRect.top,
-                            bottom: entryRect.bottom,
-                            left: entryRect.left,
-                            right: entryRect.right,
-                            x: entryRect.x,
-                            y: entryRect.y,
-                        };
-                        const prevObserved = prevGeometry.current;
-                        const hasObservedChanged = prevObserved === UNINITIALIZED ? false : !isEqual(observedGeometry, prevObserved);
-                        if (hasObservedChanged || prevObserved === UNINITIALIZED) {
-                            setGeometry(observedGeometry);
-                            if (hasObservedChanged && prevObserved !== UNINITIALIZED) {
-                                onChange?.(observedGeometry);
-                            }
-                            prevGeometry.current = observedGeometry;
-                        }
-                    }
-                });
-            }
-            resizeObserver.current.observe(element);
-        };
-        observe();
-        return () => {
-            if (resizeObserver.current) {
-                resizeObserver.current.disconnect();
-            }
-        };
-    }, [element, onChange, skip]);
-    return geometry;
-};
-
 /**
  * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
  * The boolean will be true if the element is being hovered, and false if it is not.
@@ -1616,6 +1513,96 @@ const useIsTextTruncated = (text, { skip = false } = {}) => {
     return useMemo(() => ({ ref, isTextTruncated }), [isTextTruncated]);
 };
 
+/**
+ * Shared measurement logic used by both useMeasure and useMeasureElement.
+ * This hook observes an element and measures its geometry.
+ */
+const useMeasureShared = (element, { skip = false, onChange } = {}) => {
+    const [geometry, setGeometry] = useState(undefined);
+    const observerRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    const isInitialRender = useRef(true);
+    onChangeRef.current = onChange;
+    const disconnectObserver = () => {
+        if (observerRef.current !== null) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+    };
+    useEffect(() => {
+        if (skip || element === null) {
+            return;
+        }
+        const updateGeometry = (rect) => {
+            const newGeometry = omit(rect, ["toJSON"]);
+            setGeometry(prevGeometry => {
+                if (isEqual(prevGeometry, newGeometry)) {
+                    return prevGeometry;
+                }
+                if (isInitialRender.current === false) {
+                    onChangeRef.current?.(newGeometry);
+                }
+                return newGeometry;
+            });
+            isInitialRender.current = false;
+        };
+        const handleResize = (entries) => {
+            for (const entry of entries) {
+                const rect = entry.target.getBoundingClientRect();
+                updateGeometry(rect);
+            }
+        };
+        disconnectObserver();
+        const observer = new ResizeObserver(handleResize);
+        observer.observe(element);
+        observerRef.current = observer;
+        const initialRect = element.getBoundingClientRect();
+        updateGeometry(initialRect);
+        return disconnectObserver;
+    }, [element, skip]);
+    return 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.
+ *
+ * @returns {UseMeasureResult<HTMLElement>} An object containing `geometry`, `ref` callback, and `element`.
+ * @template TElement extends HTMLElement
+ * @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.
+ *
+ * @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>;
+ * ```
+ */
+const useMeasureElement = (ref, { skip = false, onChange } = {}) => {
+    return useMeasureShared(ref.current, { skip, onChange });
+};
+
 /**
  * Hook that returns true if any modifier key (Ctrl, Alt, Shift, Meta/Cmd) is pressed
  *
@@ -2394,9 +2381,8 @@ const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle,
     return (jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
 };
 const Collapsible = ({ children, expanded, id, variant, extraPadding }) => {
-    const ref = useRef(null);
-    const { height } = useGeometry(ref);
-    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height || "auto" : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible({ variant, extraPadding }), children: children }) }) }));
+    const { geometry, ref } = useMeasure();
+    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? (geometry?.height ?? "auto") : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible({ variant, extraPadding }), children: children }) }) }));
 };
 
 /**
@@ -2843,9 +2829,9 @@ const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, })
  * @returns {Element} HorizontalOverflowScroller component
  */
 const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollStateChange, }) => {
-    const containerRef = useRef(null);
     const childrenArray = Children.toArray(children);
-    const { width: containerWidth } = useGeometry(containerRef);
+    const containerRef = useRef(null);
+    const containerGeometry = useMeasureElement(containerRef);
     const { isScrollable, isAtBeginning, isAtEnd } = useScrollDetection(containerRef, {
         direction: "horizontal",
         onScrollStateChange: onScrollStateChange
@@ -2857,20 +2843,18 @@ const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollS
             : undefined,
     });
     const handleScrollLeft = () => {
-        const element = containerRef.current;
-        if (!element || !containerWidth)
+        if (!containerRef.current || containerGeometry?.width === undefined)
             return;
-        element.scrollBy({
-            left: -containerWidth,
+        containerRef.current.scrollBy({
+            left: -containerGeometry.width,
             behavior: "smooth",
         });
     };
     const handleScrollRight = () => {
-        const element = containerRef.current;
-        if (!element || !containerWidth)
+        if (!containerRef.current || containerGeometry?.width === undefined)
             return;
-        element.scrollBy({
-            left: containerWidth,
+        containerRef.current.scrollBy({
+            left: containerGeometry.width,
             behavior: "smooth",
         });
     };
@@ -5359,4 +5343,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, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, 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, useMeasureElement, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.17",
+  "version": "1.10.19",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.49",
-    "@trackunit/css-class-variance-utilities": "1.7.49",
-    "@trackunit/shared-utils": "1.9.49",
-    "@trackunit/ui-icons": "1.7.50",
-    "@trackunit/react-test-setup": "1.4.49",
+    "@trackunit/ui-design-tokens": "1.7.51",
+    "@trackunit/css-class-variance-utilities": "1.7.51",
+    "@trackunit/shared-utils": "1.9.51",
+    "@trackunit/ui-icons": "1.7.52",
+    "@trackunit/react-test-setup": "1.4.51",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/hooks/index.d.ts

@@ -6,12 +6,14 @@ export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
 export * from "./useElevatedReducer";
 export * from "./useElevatedState";
-export * from "./useGeometry";
 export * from "./useHover";
 export * from "./useInfiniteScroll";
 export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
 export * from "./useIsTextTruncated";
+export * from "./useMeasure/useMeasure";
+export * from "./useMeasure/useMeasureElement";
+export type { Geometry } from "./useMeasure/useMeasureShared";
 export * from "./useModifierKey";
 export * from "./useRelayPagination";
 export * from "./useResize";

package/src/hooks/useMeasure/useMeasure.d.ts

@@ -0,0 +1,22 @@
+import { RefCallback } from "react";
+import { Geometry, UseMeasureSharedOptions } from "./useMeasureShared";
+type UseMeasureOptions = UseMeasureSharedOptions;
+type UseMeasureResult<TElement extends HTMLElement = HTMLElement> = {
+    geometry: Geometry | undefined;
+    ref: RefCallback<TElement>;
+    element: TElement | null;
+};
+/**
+ * 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.
+ *
+ * @returns {UseMeasureResult<HTMLElement>} An object containing `geometry`, `ref` callback, and `element`.
+ * @template TElement extends HTMLElement
+ * @example
+ * ```tsx
+ * const { geometry, ref } = useMeasure();
+ * return <div ref={ref}>Width: {geometry.width}</div>;
+ * ```
+ */
+export declare const useMeasure: <TElement extends HTMLElement = HTMLElement>({ skip, onChange, }?: UseMeasureOptions) => UseMeasureResult<TElement>;
+export {};

package/src/hooks/useMeasure/useMeasureElement.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+import { Geometry, UseMeasureSharedOptions } from "./useMeasureShared";
+type UseMeasureElementOptions = UseMeasureSharedOptions;
+/**
+ * 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.
+ *
+ * @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>;
+ * ```
+ */
+export declare const useMeasureElement: <TElement extends HTMLElement = HTMLElement>(ref: RefObject<TElement | null>, { skip, onChange }?: UseMeasureElementOptions) => Geometry | undefined;
+export {};

package/src/hooks/useMeasure/useMeasureShared.d.ts

@@ -0,0 +1,19 @@
+export type Geometry = {
+    readonly height: number;
+    readonly width: number;
+    readonly x: number;
+    readonly y: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+};
+export type UseMeasureSharedOptions = {
+    skip?: boolean;
+    onChange?: (geometry: Geometry) => void;
+};
+/**
+ * Shared measurement logic used by both useMeasure and useMeasureElement.
+ * This hook observes an element and measures its geometry.
+ */
+export declare const useMeasureShared: <TElement extends HTMLElement>(element: TElement | null, { skip, onChange }?: UseMeasureSharedOptions) => Geometry | undefined;

package/src/hooks/useGeometry.d.ts

@@ -1,21 +0,0 @@
-import { RefObject } from "react";
-type Geometry = {
-    width: number;
-    height: number;
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    x: number;
-    y: number;
-};
-interface UseGeometryOptions {
-    skip?: boolean;
-    onChange?: (geometry: Geometry) => void;
-}
-/**
- * Custom hook to get the geometry of an element.
- * Size and position of the element relative to the viewport.
- */
-export declare const useGeometry: (ref: RefObject<HTMLElement | null>, { skip, onChange }?: UseGeometryOptions) => Geometry;
-export {};