@trackunit/react-components 1.1.2 → 1.1.7

package/index.cjs.js

@@ -271,19 +271,41 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
- * @param {RefObject<HTMLElement>} ref - The ref to the element to check for text wrapping
- * @returns {boolean} True if the text spans multiple lines
- */
-const useIsTextWrapping = (ref) => {
-    const [isWrapping, setIsWrapping] = react.useState(false);
+ * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @returns {{
+ *   ref: RefObject<TElement | null>;
+ *   isTooltipVisible: boolean;
+ * }} An object with:
+ * - `ref`: a ref to attach to the element you want to observe for truncation.
+ * - `isTextWrapping`: a boolean indicating if the text is wrapping.
+ */
+const useIsTextWrapping = () => {
+    const ref = react.useRef(null);
+    const [isTextWrapping, setIsTextWrapping] = react.useState(false);
+    const setTextWrappingState = react.useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { clientHeight, scrollHeight } = ref.current;
+        setIsTextWrapping(clientHeight > scrollHeight / 2);
+    }, []);
     react.useEffect(() => {
         if (!ref.current) {
-            setIsWrapping(false);
             return;
         }
-        setIsWrapping(ref.current.clientHeight > ref.current.scrollHeight / 2);
-    }, [ref.current?.clientHeight, ref.current?.scrollHeight, ref]);
-    return isWrapping;
+        // Perform an immediate measurement on mount.
+        // In some environments (especially tests) no actual "resize" event is triggered,
+        // so this ensures we detect the correct wrapping state right away.
+        setTextWrappingState();
+        // Observe resizing to check if wrapping changes
+        const observer = new ResizeObserver(() => {
+            setTextWrappingState();
+        });
+        observer.observe(ref.current);
+        // Clean up on unmount
+        return () => observer.disconnect();
+    }, [setTextWrappingState]);
+    return { ref, isTextWrapping };
 };
 
 const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
@@ -756,15 +778,14 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = react.useRef(null);
-    const titleRef = react.useRef(null);
-    const isWrapping = useIsTextWrapping(titleRef);
+    const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     react.useEffect(() => {
         if (autoScroll) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isWrapping && !children }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { circular: true, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { circular: true, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {
@@ -1226,21 +1247,49 @@ const useIsFullscreen = () => {
 };
 
 /**
- * Check if text is cut off.
+ * A custom hook that determines if text within an element is truncated
+ * (i.e., the text overflows the container).
  *
- * @param {RefObject<HTMLElement>} ref The ref to the element to check.
- * @returns {boolean} True if the text is cut off.
+ * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @param {string} [text] - (Optional) Text used to trigger a re-check of truncation,
+ *                          especially if the text is dynamic (such as an input's value).
+ * @returns {{
+ *   ref: RefObject<TElement | null>;
+ *   isTooltipVisible: boolean;
+ * }} An object with:
+ * - `ref`: a ref to attach to the element you want to observe for truncation.
+ * - `isTextTruncated`: a boolean indicating if the text is truncated.
  */
-const useIsTextCutOff = (ref) => {
-    const [isTextCutOff, setIsTextCutOff] = react.useState(false);
+const useIsTextTruncated = (text) => {
+    const ref = react.useRef(null);
+    const [isTextTruncated, setIsTextTruncated] = react.useState(false);
+    const updateTextVisibility = react.useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { scrollWidth, clientWidth } = ref.current;
+        setIsTextTruncated(scrollWidth > clientWidth);
+    }, []);
     react.useEffect(() => {
         if (!ref.current) {
-            setIsTextCutOff(false);
             return;
         }
-        setIsTextCutOff(ref.current.offsetWidth < ref.current.scrollWidth);
-    }, [ref.current?.offsetWidth, ref.current?.scrollWidth, ref]);
-    return isTextCutOff;
+        // Observe resizing to check if truncation changes
+        const observer = new ResizeObserver(() => {
+            updateTextVisibility();
+        });
+        observer.observe(ref.current);
+        // Clean up on unmount
+        return () => observer.disconnect();
+    }, [updateTextVisibility]);
+    // Re-check whenever text changes
+    react.useEffect(() => {
+        if (!text) {
+            return;
+        }
+        updateTextVisibility();
+    }, [text, updateTextVisibility]);
+    return { ref, isTextTruncated };
 };
 
 /**
@@ -1307,7 +1356,7 @@ const useScrollDetection = (elementRef) => {
         }
         const { scrollTop, scrollHeight, clientHeight } = element;
         setIsAtTop(scrollTop === 0);
-        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) < 1);
+        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) <= 1);
         setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
     }, [elementRef]);
     const debouncedCheckScrollPosition = usehooksTs.useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
@@ -2615,7 +2664,7 @@ const cvaKPICardValueContainer = cssClassVarianceUtilities.cvaMerge([], {
     },
 });
 
-const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) }) }));
+const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) }) }));
 /**
  * The KPICard component is used to display KPIs.
  *
@@ -2625,7 +2674,7 @@ const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "div";
     const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsxRuntime.jsx(LoadingContent, {})) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPICardValueContainer({
+    return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPICardValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                     }), children: [jsxRuntime.jsxs("span", { children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
 };
@@ -2908,7 +2957,7 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
-    className: "text-secondary-800",
+    className: "text-secondary-400",
 }, iconButtonProps = {
     size: "medium",
     circular: false,
@@ -3027,6 +3076,63 @@ const PageContent = ({ className, children, dataTestId, layout }) => {
     return (jsxRuntime.jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
+const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [16, 25], lines: 2, margin: "3px 0 0 0", width: [75, 50] }) }) }));
+const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
+    return (jsxRuntime.jsx("div", { className: "hidden items-center gap-4 md:flex", children: kpiMetrics
+            .filter(kpi => !kpi.hidden)
+            .map((kpi, index) => {
+            if (kpi.loading) {
+                return jsxRuntime.jsx(LoadingContent, {}, `${kpi}-${index}`);
+            }
+            return (jsxRuntime.jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: kpi.header }), jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsxRuntime.jsx("span", { className: "text-lg font-medium text-slate-900", children: kpi.value }), kpi.unit ? jsxRuntime.jsx("span", { className: "text-xs text-slate-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
+        }) }));
+};
+
+function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
+    const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, dataTestId, target, variant } = action;
+    // This component handles all the "wrapping" logic for Link/Tooltip
+    // The "content" is either a Button or a MenuItem, depending on `isMenuItem`
+    const content = isMenuItem ? (jsxRuntime.jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: actionText, onClick: e => {
+            actionCallback?.(e);
+            externalOnClick?.();
+        }, prefix: prefixIconName ? jsxRuntime.jsx(Icon, { name: prefixIconName, size: "medium" }) : null, variant: variant === "secondary-danger" ? "danger" : "primary" })) : (jsxRuntime.jsx(Button, { dataTestId: dataTestId, disabled: disabled, onClick: e => {
+            actionCallback?.(e);
+            externalOnClick?.();
+        }, prefix: prefixIconName ? jsxRuntime.jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "medium", variant: variant, children: actionText }));
+    // Wrap `content` with Tooltip
+    const wrappedWithTooltip = tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "block", label: tooltipLabel, children: content })) : (content);
+    // Finally, wrap with Link if `to` is provided
+    return to ? (jsxRuntime.jsx(reactRouter.Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
+}
+const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction, }) => {
+    const enabledActions = react.useMemo(() => actions.filter(action => !action.hidden), [actions]);
+    // If we need to render a "More Menu" because we have too many actions:
+    if (enabledActions.length > 2 || (hasPrimaryAction && enabledActions.length > 1)) {
+        // Separate them into danger vs. other
+        const [dangerActions, otherActions] = enabledActions.reduce(([danger, others], action) => {
+            if (action.variant === "secondary-danger") {
+                return [[...danger, action], others];
+            }
+            else {
+                return [danger, [...others, action]];
+            }
+        }, [[], []]);
+        return (jsxRuntime.jsx(MoreMenu, { dataTestId: "secondary-actions-more-menu", children: close => (jsxRuntime.jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length ? jsxRuntime.jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+    }
+    // Otherwise, render them inline as buttons
+    return (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
+            .toSorted((a, b) => {
+            if (a.variant === "secondary" && b.variant === "secondary-danger") {
+                return 1;
+            }
+            else if (a.variant === "secondary-danger" && b.variant === "secondary") {
+                return -1;
+            }
+            return 0;
+        })
+            .map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action }, `${action.actionText}-${index}`))) }));
+};
+
 const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
@@ -3035,53 +3141,39 @@ const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "
         },
     },
 });
-const cvaPageHeader = cssClassVarianceUtilities.cvaMerge([
-    "box-border",
-    "py-responsive-space",
-    "px-responsive-space-lg",
-    "flex",
-    "flex-wrap",
-    "items-center",
-    "gap-x-4",
-    "gap-y-1",
-    "justify-between",
-]);
-const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
-const cvaPageHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-x-4", "flex-wrap", "items-center"]);
-const cvaPageHeaderHeadingAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-wrap", "items-center", "gap-x-4", "gap-y-2", "grow"], {
-    variants: {
-        actionPosition: {
-            right: ["justify-between"],
-        },
-    },
-});
-const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-wrap", "gap-x-6", "items-center"]);
-cssClassVarianceUtilities.cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
-const cvaPageHeaderLink = cssClassVarianceUtilities.cvaMerge([
-    "text-primary-600",
-    "hover:text-primary-700",
-    "flex",
-    "items-center",
-    "gap-1",
-    "text-xs",
-    "underline",
-]);
+const cvaPageHeader = cssClassVarianceUtilities.cvaMerge(["box-border", "py-4", "px-6", "flex", "items-center", "gap-y-1"]);
+const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["text-slate-900", "text-2xl", "font-bold", "truncate"]);
+
+const PageHeaderTitle = ({ title, dataTestId }) => {
+    const { ref, isTextTruncated } = useIsTextTruncated();
+    return (jsxRuntime.jsx("div", { className: "flex flex-row items-center", children: jsxRuntime.jsx(Tooltip, { className: "grid min-w-16", disabled: !isTextTruncated, label: title, placement: "top", children: jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }));
+};
 
 /**
- * Pageheader component is used to display a page header.
+ * The PageHeader component is used to display the header of a page.
  *
- * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ * It provides critical context by indicating the current location within the application or website.
+ * PageHeader can be used to highlight the page topic, display helpful information about the page, and carry the action items related to the current page.
+ * Tabs can be added to the PageHeader to allow users to navigate between different sections of the page.
  *
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, descriptionIcon, linkText = "Help Center Article", }) => {
+const PageHeader = ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }) => {
+    const tagRenderer = react.useMemo(() => {
+        if (!tagLabel || showLoading) {
+            return null;
+        }
+        // If the user passes a string, we render the string as a tag with props provided.
+        return (jsxRuntime.jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsxRuntime.jsx(Tooltip, { dataTestId: "page-header-tag-tooltip", disabled: !tagTooltipLabel, label: tagTooltipLabel, placement: "top", children: jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: "page-header-tag", children: tagLabel }) }) }));
+    }, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
-                            actionPosition: actionPosition ? actionPosition : null,
-                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap items-center gap-x-4 gap-y-2", children: [jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon ?? "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsxRuntime.jsx("div", { children: action })] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsxRuntime.jsx(reactRouter.Link, { to: backTo, children: jsxRuntime.jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || description ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+                                    name: descriptionIcon ?? "QuestionMarkCircle",
+                                    dataTestId: "page-header-description-icon",
+                                }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxRuntime.jsxs("div", { className: "ml-auto flex gap-2", children: [kpiMetrics ? jsxRuntime.jsx(PageHeaderKpiMetrics, { kpiMetrics: kpiMetrics }) : null, Array.isArray(secondaryActions) ? (jsxRuntime.jsx(PageHeaderSecondaryActions, { actions: secondaryActions, hasPrimaryAction: !!primaryAction })) : secondaryActions ? (secondaryActions) : null, primaryAction && !primaryAction.hidden ? (jsxRuntime.jsx(Tooltip, { disabled: !primaryAction.tooltipLabel, label: primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName ? jsxRuntime.jsx(Icon, { name: primaryAction.prefixIconName, size: "small" }) : undefined, size: "medium", variant: primaryAction.variant, children: primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -3165,7 +3257,6 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
 function useConfirmExit(confirmExit, when = true) {
-    // eslint-disable-next-line sonarjs/deprecation
     reactRouter.useBlocker(confirmExit, when);
 }
 /**
@@ -3371,8 +3462,8 @@ const cvaTab = cssClassVarianceUtilities.cvaMerge([
     "justify-center",
     "gap-2",
     "text-sm",
-    "px-4",
-    "py-2.5",
+    "px-6",
+    "py-2",
     "cursor-pointer",
     "transition",
     "duration-200",
@@ -3477,7 +3568,6 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * Individual ToggleItem to create custom ToggleGroups
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
-    // eslint-disable-next-line sonarjs/no-selector-parameter
     return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !text?.truncate && tooltip?.content === undefined, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
 };
 
@@ -3716,6 +3806,7 @@ const cvaClickable = cssClassVarianceUtilities.cvaMerge([
     },
 });
 
+exports.ActionRenderer = ActionRenderer;
 exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
@@ -3745,6 +3836,9 @@ exports.PackageNameStoryComponent = PackageNameStoryComponent;
 exports.Page = Page;
 exports.PageContent = PageContent;
 exports.PageHeader = PageHeader;
+exports.PageHeaderKpiMetrics = PageHeaderKpiMetrics;
+exports.PageHeaderSecondaryActions = PageHeaderSecondaryActions;
+exports.PageHeaderTitle = PageHeaderTitle;
 exports.Pagination = Pagination;
 exports.Polygon = Polygon;
 exports.Popover = Popover;
@@ -3789,6 +3883,9 @@ exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;
 exports.cvaMenuItemStyle = cvaMenuItemStyle;
 exports.cvaMenuItemSuffix = cvaMenuItemSuffix;
+exports.cvaPageHeader = cvaPageHeader;
+exports.cvaPageHeaderContainer = cvaPageHeaderContainer;
+exports.cvaPageHeaderHeading = cvaPageHeaderHeading;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getValueBarColorByValue = getValueBarColorByValue;
@@ -3804,7 +3901,7 @@ exports.useGeometry = useGeometry;
 exports.useHover = useHover;
 exports.useIsFirstRender = useIsFirstRender;
 exports.useIsFullscreen = useIsFullscreen;
-exports.useIsTextCutOff = useIsTextCutOff;
+exports.useIsTextTruncated = useIsTextTruncated;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, forwardRef, useState, createElement, useCallback, memo, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
+import { useRef, useMemo, useEffect, forwardRef, useState, useCallback, createElement, memo, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -269,19 +269,41 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
- * @param {RefObject<HTMLElement>} ref - The ref to the element to check for text wrapping
- * @returns {boolean} True if the text spans multiple lines
+ * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @returns {{
+ *   ref: RefObject<TElement | null>;
+ *   isTooltipVisible: boolean;
+ * }} An object with:
+ * - `ref`: a ref to attach to the element you want to observe for truncation.
+ * - `isTextWrapping`: a boolean indicating if the text is wrapping.
  */
-const useIsTextWrapping = (ref) => {
-    const [isWrapping, setIsWrapping] = useState(false);
+const useIsTextWrapping = () => {
+    const ref = useRef(null);
+    const [isTextWrapping, setIsTextWrapping] = useState(false);
+    const setTextWrappingState = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { clientHeight, scrollHeight } = ref.current;
+        setIsTextWrapping(clientHeight > scrollHeight / 2);
+    }, []);
     useEffect(() => {
         if (!ref.current) {
-            setIsWrapping(false);
             return;
         }
-        setIsWrapping(ref.current.clientHeight > ref.current.scrollHeight / 2);
-    }, [ref.current?.clientHeight, ref.current?.scrollHeight, ref]);
-    return isWrapping;
+        // Perform an immediate measurement on mount.
+        // In some environments (especially tests) no actual "resize" event is triggered,
+        // so this ensures we detect the correct wrapping state right away.
+        setTextWrappingState();
+        // Observe resizing to check if wrapping changes
+        const observer = new ResizeObserver(() => {
+            setTextWrappingState();
+        });
+        observer.observe(ref.current);
+        // Clean up on unmount
+        return () => observer.disconnect();
+    }, [setTextWrappingState]);
+    return { ref, isTextWrapping };
 };
 
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
@@ -754,15 +776,14 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = useRef(null);
-    const titleRef = useRef(null);
-    const isWrapping = useIsTextWrapping(titleRef);
+    const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     useEffect(() => {
         if (autoScroll) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isWrapping && !children }), children: [jsx("div", { className: cvaAlertIconContainer(), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children }), children: [jsx("div", { className: cvaAlertIconContainer(), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {
@@ -1224,21 +1245,49 @@ const useIsFullscreen = () => {
 };
 
 /**
- * Check if text is cut off.
+ * A custom hook that determines if text within an element is truncated
+ * (i.e., the text overflows the container).
  *
- * @param {RefObject<HTMLElement>} ref The ref to the element to check.
- * @returns {boolean} True if the text is cut off.
+ * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @param {string} [text] - (Optional) Text used to trigger a re-check of truncation,
+ *                          especially if the text is dynamic (such as an input's value).
+ * @returns {{
+ *   ref: RefObject<TElement | null>;
+ *   isTooltipVisible: boolean;
+ * }} An object with:
+ * - `ref`: a ref to attach to the element you want to observe for truncation.
+ * - `isTextTruncated`: a boolean indicating if the text is truncated.
  */
-const useIsTextCutOff = (ref) => {
-    const [isTextCutOff, setIsTextCutOff] = useState(false);
+const useIsTextTruncated = (text) => {
+    const ref = useRef(null);
+    const [isTextTruncated, setIsTextTruncated] = useState(false);
+    const updateTextVisibility = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { scrollWidth, clientWidth } = ref.current;
+        setIsTextTruncated(scrollWidth > clientWidth);
+    }, []);
     useEffect(() => {
         if (!ref.current) {
-            setIsTextCutOff(false);
             return;
         }
-        setIsTextCutOff(ref.current.offsetWidth < ref.current.scrollWidth);
-    }, [ref.current?.offsetWidth, ref.current?.scrollWidth, ref]);
-    return isTextCutOff;
+        // Observe resizing to check if truncation changes
+        const observer = new ResizeObserver(() => {
+            updateTextVisibility();
+        });
+        observer.observe(ref.current);
+        // Clean up on unmount
+        return () => observer.disconnect();
+    }, [updateTextVisibility]);
+    // Re-check whenever text changes
+    useEffect(() => {
+        if (!text) {
+            return;
+        }
+        updateTextVisibility();
+    }, [text, updateTextVisibility]);
+    return { ref, isTextTruncated };
 };
 
 /**
@@ -1305,7 +1354,7 @@ const useScrollDetection = (elementRef) => {
         }
         const { scrollTop, scrollHeight, clientHeight } = element;
         setIsAtTop(scrollTop === 0);
-        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) < 1);
+        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) <= 1);
         setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
     }, [elementRef]);
     const debouncedCheckScrollPosition = useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
@@ -2613,7 +2662,7 @@ const cvaKPICardValueContainer = cvaMerge([], {
     },
 });
 
-const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) }) }));
+const LoadingContent$1 = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [18, 20], lines: 2, margin: "3px 0", width: [50, 100] }) }) }));
 /**
  * The KPICard component is used to display KPIs.
  *
@@ -2623,7 +2672,7 @@ const LoadingContent = () => (jsx("div", { className: "flex flex-row items-cente
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
     const isSmallVariant = variant === "small";
-    return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsx(LoadingContent, {})) : (jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPICardValueContainer({
+    return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx(Card, { className: cvaKPICard({ isClickable: Boolean((onClick || asChild) && !loading), isActive, variant }), children: loading ? (jsx(LoadingContent$1, {})) : (jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: isSmallVariant ? "mt-0.5" : "", dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPICardValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
                                     }), children: [jsxs("span", { children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
 };
@@ -2906,7 +2955,7 @@ const cvaMoreMenu = cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
-    className: "text-secondary-800",
+    className: "text-secondary-400",
 }, iconButtonProps = {
     size: "medium",
     circular: false,
@@ -3025,6 +3074,63 @@ const PageContent = ({ className, children, dataTestId, layout }) => {
     return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
+const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [16, 25], lines: 2, margin: "3px 0 0 0", width: [75, 50] }) }) }));
+const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
+    return (jsx("div", { className: "hidden items-center gap-4 md:flex", children: kpiMetrics
+            .filter(kpi => !kpi.hidden)
+            .map((kpi, index) => {
+            if (kpi.loading) {
+                return jsx(LoadingContent, {}, `${kpi}-${index}`);
+            }
+            return (jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsx("span", { className: "text-xs text-slate-500", children: kpi.header }), jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsx("span", { className: "text-lg font-medium text-slate-900", children: kpi.value }), kpi.unit ? jsx("span", { className: "text-xs text-slate-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
+        }) }));
+};
+
+function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
+    const { to, tooltipLabel, prefixIconName, disabled, actionText, actionCallback, dataTestId, target, variant } = action;
+    // This component handles all the "wrapping" logic for Link/Tooltip
+    // The "content" is either a Button or a MenuItem, depending on `isMenuItem`
+    const content = isMenuItem ? (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, label: actionText, onClick: e => {
+            actionCallback?.(e);
+            externalOnClick?.();
+        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "medium" }) : null, variant: variant === "secondary-danger" ? "danger" : "primary" })) : (jsx(Button, { dataTestId: dataTestId, disabled: disabled, onClick: e => {
+            actionCallback?.(e);
+            externalOnClick?.();
+        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "medium", variant: variant, children: actionText }));
+    // Wrap `content` with Tooltip
+    const wrappedWithTooltip = tooltipLabel ? (jsx(Tooltip, { className: "block", label: tooltipLabel, children: content })) : (content);
+    // Finally, wrap with Link if `to` is provided
+    return to ? (jsx(Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
+}
+const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction, }) => {
+    const enabledActions = useMemo(() => actions.filter(action => !action.hidden), [actions]);
+    // If we need to render a "More Menu" because we have too many actions:
+    if (enabledActions.length > 2 || (hasPrimaryAction && enabledActions.length > 1)) {
+        // Separate them into danger vs. other
+        const [dangerActions, otherActions] = enabledActions.reduce(([danger, others], action) => {
+            if (action.variant === "secondary-danger") {
+                return [[...danger, action], others];
+            }
+            else {
+                return [danger, [...others, action]];
+            }
+        }, [[], []]);
+        return (jsx(MoreMenu, { dataTestId: "secondary-actions-more-menu", children: close => (jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length ? jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+    }
+    // Otherwise, render them inline as buttons
+    return (jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
+            .toSorted((a, b) => {
+            if (a.variant === "secondary" && b.variant === "secondary-danger") {
+                return 1;
+            }
+            else if (a.variant === "secondary-danger" && b.variant === "secondary") {
+                return -1;
+            }
+            return 0;
+        })
+            .map((action, index) => (jsx(ActionRenderer, { action: action }, `${action.actionText}-${index}`))) }));
+};
+
 const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
@@ -3033,53 +3139,39 @@ const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
         },
     },
 });
-const cvaPageHeader = cvaMerge([
-    "box-border",
-    "py-responsive-space",
-    "px-responsive-space-lg",
-    "flex",
-    "flex-wrap",
-    "items-center",
-    "gap-x-4",
-    "gap-y-1",
-    "justify-between",
-]);
-const cvaPageHeaderHeading = cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
-const cvaPageHeaderHeadingContainer = cvaMerge(["flex", "gap-x-4", "flex-wrap", "items-center"]);
-const cvaPageHeaderHeadingAccessoriesContainer = cvaMerge(["flex", "flex-wrap", "items-center", "gap-x-4", "gap-y-2", "grow"], {
-    variants: {
-        actionPosition: {
-            right: ["justify-between"],
-        },
-    },
-});
-const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "items-center"]);
-cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
-const cvaPageHeaderLink = cvaMerge([
-    "text-primary-600",
-    "hover:text-primary-700",
-    "flex",
-    "items-center",
-    "gap-1",
-    "text-xs",
-    "underline",
-]);
+const cvaPageHeader = cvaMerge(["box-border", "py-4", "px-6", "flex", "items-center", "gap-y-1"]);
+const cvaPageHeaderHeading = cvaMerge(["text-slate-900", "text-2xl", "font-bold", "truncate"]);
+
+const PageHeaderTitle = ({ title, dataTestId }) => {
+    const { ref, isTextTruncated } = useIsTextTruncated();
+    return (jsx("div", { className: "flex flex-row items-center", children: jsx(Tooltip, { className: "grid min-w-16", disabled: !isTextTruncated, label: title, placement: "top", children: jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, ref: ref, children: title }) }) }));
+};
 
 /**
- * Pageheader component is used to display a page header.
+ * The PageHeader component is used to display the header of a page.
  *
- * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ * It provides critical context by indicating the current location within the application or website.
+ * PageHeader can be used to highlight the page topic, display helpful information about the page, and carry the action items related to the current page.
+ * Tabs can be added to the PageHeader to allow users to navigate between different sections of the page.
  *
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, descriptionIcon, linkText = "Help Center Article", }) => {
+const PageHeader = ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }) => {
+    const tagRenderer = useMemo(() => {
+        if (!tagLabel || showLoading) {
+            return null;
+        }
+        // If the user passes a string, we render the string as a tag with props provided.
+        return (jsx("div", { className: "ml-auto flex flex-row gap-2", children: jsx(Tooltip, { dataTestId: "page-header-tag-tooltip", disabled: !tagTooltipLabel, label: tagTooltipLabel, placement: "top", children: jsx(Tag, { color: tagColor, dataTestId: "page-header-tag", children: tagLabel }) }) }));
+    }, [showLoading, tagColor, tagLabel, tagTooltipLabel]);
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
-                            actionPosition: actionPosition ? actionPosition : null,
-                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row flex-wrap items-center gap-x-4 gap-y-2", children: [jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon ?? "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsx("div", { children: action })] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || description ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+                                    name: descriptionIcon ?? "QuestionMarkCircle",
+                                    dataTestId: "page-header-description-icon",
+                                }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [kpiMetrics ? jsx(PageHeaderKpiMetrics, { kpiMetrics: kpiMetrics }) : null, Array.isArray(secondaryActions) ? (jsx(PageHeaderSecondaryActions, { actions: secondaryActions, hasPrimaryAction: !!primaryAction })) : secondaryActions ? (secondaryActions) : null, primaryAction && !primaryAction.hidden ? (jsx(Tooltip, { disabled: !primaryAction.tooltipLabel, label: primaryAction.tooltipLabel, children: jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName ? jsx(Icon, { name: primaryAction.prefixIconName, size: "small" }) : undefined, size: "medium", variant: primaryAction.variant, children: primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -3163,7 +3255,6 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
 const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
 
 function useConfirmExit(confirmExit, when = true) {
-    // eslint-disable-next-line sonarjs/deprecation
     useBlocker(confirmExit, when);
 }
 /**
@@ -3369,8 +3460,8 @@ const cvaTab = cvaMerge([
     "justify-center",
     "gap-2",
     "text-sm",
-    "px-4",
-    "py-2.5",
+    "px-6",
+    "py-2",
     "cursor-pointer",
     "transition",
     "duration-200",
@@ -3475,7 +3566,6 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * Individual ToggleItem to create custom ToggleGroups
  */
 const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
-    // eslint-disable-next-line sonarjs/no-selector-parameter
     return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !text?.truncate && tooltip?.content === undefined, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
 };
 
@@ -3714,4 +3804,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, 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, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.1.2",
+  "version": "1.1.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,11 +19,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "^1.0.1",
-    "@trackunit/css-class-variance-utilities": "^1.0.1",
-    "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/ui-icons": "^1.0.4",
-    "@trackunit/react-table-pagination": "^1.0.1"
+    "@trackunit/ui-design-tokens": "1.0.5",
+    "@trackunit/css-class-variance-utilities": "1.0.4",
+    "@trackunit/shared-utils": "1.2.1",
+    "@trackunit/ui-icons": "1.0.7",
+    "@trackunit/react-table-pagination": "1.0.5"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/PageHeader/PageHeader.d.ts

@@ -1,69 +1,13 @@
-import { IconName } from "@trackunit/ui-icons";
-import { ReactElement, ReactNode } from "react";
-import { CommonProps } from "../../common/CommonProps";
-import { TabListProps } from "../Tabs/TabList";
-import { TagColors } from "../Tag";
-type ActionPosition = "right";
-export interface PageHeaderProps extends CommonProps {
-    /**
-     * Text to be displayed in the header.
-     */
-    title: string | ReactNode;
-    /**
-     * The description to be displayed inside the tip.
-     */
-    description?: string | ReactNode;
-    /**
-     * The link to which user is redirected to if user clicks on the tip.
-     */
-    link?: string;
-    /**
-     * Display text of the specified link
-     */
-    linkText?: string;
-    /**
-     * Additional actions to be rendered along with the header.
-     */
-    action?: ReactNode;
-    /**
-     * Enables the actions to be pushed to the right in the available space - the default is left side.
-     */
-    actionPosition?: ActionPosition;
-    /**
-     * A tag that is displayed on the side of the header.
-     * A RectNode passed into the tag will be rendered as such.
-     * A string passed into the tag will render it using the tag component.
-     */
-    tag?: string | ReactNode;
-    /**
-     * A theme color value can be used for tag component
-     */
-    tagColor?: TagColors;
-    /**
-     * Whether spinner should be shown while loading the data.
-     */
-    showLoading?: boolean;
-    /**
-     * Child nodes to be displayed inside the page header.
-     */
-    children?: ReactNode;
-    /**
-     * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
-     */
-    backTo?: string;
-    /**
-     * The icon to be used in the description.
-     */
-    descriptionIcon?: IconName;
-    tabsList?: ReactElement<TabListProps>;
-}
+import { ReactElement } from "react";
+import { PageHeaderProps } from "./types";
 /**
- * Pageheader component is used to display a page header.
+ * The PageHeader component is used to display the header of a page.
  *
- * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ * It provides critical context by indicating the current location within the application or website.
+ * PageHeader can be used to highlight the page topic, display helpful information about the page, and carry the action items related to the current page.
+ * Tabs can be added to the PageHeader to allow users to navigate between different sections of the page.
  *
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, descriptionIcon, linkText, }: PageHeaderProps) => ReactElement;
-export {};
+export declare const PageHeader: ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }: PageHeaderProps) => ReactElement;

package/src/components/PageHeader/PageHeader.variants.d.ts

@@ -3,10 +3,3 @@ export declare const cvaPageHeaderContainer: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaPageHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderHeading: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderHeadingAccessoriesContainer: (props?: ({
-    actionPosition?: "right" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaPageHeaderChildContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderDescriptionContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderLink: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/PageHeader/components/PageHeaderKpiMetrics.d.ts

@@ -0,0 +1,4 @@
+import { PageHeaderKpiMetricsType } from "../types";
+export declare const PageHeaderKpiMetrics: ({ kpiMetrics }: {
+    kpiMetrics: PageHeaderKpiMetricsType[];
+}) => import("react/jsx-runtime").JSX.Element;

package/src/components/PageHeader/components/PageHeaderSecondaryActions.d.ts

@@ -0,0 +1,20 @@
+import { PageHeaderSecondaryActionType } from "../types";
+type ActionRendererProps = {
+    action: PageHeaderSecondaryActionType;
+    /**
+     * Indicates if we should render a MenuItem or Button.
+     * If `isMenuItem` is true, we render `MenuItem`, otherwise we render `Button`.
+     */
+    isMenuItem?: boolean;
+    /**
+     * Because sometimes in a menu, you want to close the menu after clicking.
+     * If `externalOnClick` is provided, we’ll call it after the action callback.
+     */
+    externalOnClick?: () => void;
+};
+export declare function ActionRenderer({ action, isMenuItem, externalOnClick }: ActionRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, }: {
+    actions: PageHeaderSecondaryActionType[];
+    hasPrimaryAction?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/PageHeader/components/PageHeaderTitle.d.ts

@@ -0,0 +1,4 @@
+export declare const PageHeaderTitle: ({ title, dataTestId }: {
+    title: string;
+    dataTestId?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/components/PageHeader/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./PageHeaderKpiMetrics";
+export * from "./PageHeaderSecondaryActions";
+export * from "./PageHeaderTitle";

package/src/components/PageHeader/index.d.ts

@@ -1 +1,4 @@
+export * from "./components";
 export * from "./PageHeader";
+export * from "./PageHeader.variants";
+export * from "./types";

package/src/components/PageHeader/types.d.ts

@@ -0,0 +1,83 @@
+import { IconName } from "@trackunit/ui-icons";
+import { ReactElement, ReactNode } from "react";
+import { CommonProps } from "../../common";
+import { ButtonVariant } from "../buttons";
+import { TabListProps } from "../Tabs/TabList";
+import { TagColors } from "../Tag";
+export type PageHeaderKpiMetricsType = {
+    header: string;
+    value: string | number;
+    unit?: string;
+    loading?: boolean;
+    hidden?: boolean;
+};
+export type PageHeaderActionType = CommonProps & {
+    actionCallback?: (e?: React.MouseEvent) => void;
+    actionText: string;
+    prefixIconName?: IconName;
+    disabled?: boolean;
+    hidden?: boolean;
+    loading?: boolean;
+    tooltipLabel?: string;
+};
+export type PageHeaderSecondaryActionType = PageHeaderActionType & {
+    variant: Extract<ButtonVariant, "secondary" | "secondary-danger">;
+    to?: string;
+    target?: HTMLAnchorElement["target"];
+};
+export type PageHeaderPrimaryActionType = PageHeaderActionType & {
+    variant: Extract<ButtonVariant, "primary" | "primary-danger">;
+};
+interface BasePageHeaderProps extends CommonProps {
+    /**
+     * Text to be displayed in the header.
+     */
+    title: string | ReactNode;
+    /**
+     * The description to be displayed inside the tip.
+     */
+    description?: string | ReactNode;
+    /**
+     * The action to be displayed on the right side of the header.
+     */
+    primaryAction?: PageHeaderPrimaryActionType;
+    /**
+     * A tag that is displayed on the side of the header.
+     */
+    tagLabel?: string;
+    /**
+     * A theme color value can be used for tag component
+     */
+    tagColor?: TagColors;
+    /**
+     * The tooltip to be displayed in the tooltip for the tag.
+     */
+    tagTooltipLabel?: string;
+    /**
+     * Whether spinner should be shown while loading the data.
+     */
+    showLoading?: boolean;
+    /**
+     * The link to the previous page which will be rendered inside
+     * an IconButton component to the left of the heading.
+     */
+    backTo?: string;
+    /**
+     * The icon to be used in the description.
+     */
+    descriptionIcon?: IconName;
+    /**
+     * The list of tabs to be displayed below the header.
+     */
+    tabsList?: ReactElement<TabListProps>;
+}
+interface WithActions {
+    secondaryActions?: PageHeaderSecondaryActionType[] | ReactNode;
+    kpiMetrics?: never;
+}
+interface WithKpiMetrics {
+    secondaryActions?: never;
+    kpiMetrics?: PageHeaderKpiMetricsType[];
+}
+export type PageHeaderProps = BasePageHeaderProps & (WithActions | WithKpiMetrics);
+export {};

package/src/hooks/index.d.ts

@@ -8,7 +8,7 @@ export * from "./useGeometry";
 export * from "./useHover";
 export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
-export * from "./useIsTextCutOff";
+export * from "./useIsTextTruncated";
 export * from "./useResize";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";

package/src/hooks/useIsTextTruncated.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+/**
+ * A custom hook that determines if text within an element is truncated
+ * (i.e., the text overflows the container).
+ *
+ * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @param {string} [text] - (Optional) Text used to trigger a re-check of truncation,
+ *                          especially if the text is dynamic (such as an input's value).
+ * @returns {{
+ *   ref: RefObject<TElement | null>;
+ *   isTooltipVisible: boolean;
+ * }} An object with:
+ * - `ref`: a ref to attach to the element you want to observe for truncation.
+ * - `isTextTruncated`: a boolean indicating if the text is truncated.
+ */
+export declare const useIsTextTruncated: <TElement extends HTMLElement>(text?: string) => {
+    ref: RefObject<TElement>;
+    isTextTruncated: boolean;
+};

package/src/hooks/useIsTextWrapping.d.ts

@@ -2,7 +2,15 @@ import { RefObject } from "react";
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
- * @param {RefObject<HTMLElement>} ref - The ref to the element to check for text wrapping
- * @returns {boolean} True if the text spans multiple lines
+ * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @returns {{
+ *   ref: RefObject<TElement | null>;
+ *   isTooltipVisible: boolean;
+ * }} An object with:
+ * - `ref`: a ref to attach to the element you want to observe for truncation.
+ * - `isTextWrapping`: a boolean indicating if the text is wrapping.
  */
-export declare const useIsTextWrapping: (ref: RefObject<HTMLElement>) => boolean;
+export declare const useIsTextWrapping: <TElement extends HTMLElement>() => {
+    ref: RefObject<TElement>;
+    isTextWrapping: boolean;
+};

package/src/hooks/useIsTextCutOff.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from "react";
-/**
- * Check if text is cut off.
- *
- * @param {RefObject<HTMLElement>} ref The ref to the element to check.
- * @returns {boolean} True if the text is cut off.
- */
-export declare const useIsTextCutOff: (ref: RefObject<HTMLElement>) => boolean;