@trackunit/react-components 1.10.5 → 1.10.7

package/index.cjs.js

@@ -12,11 +12,11 @@ var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
 var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
+var esToolkit = require('es-toolkit');
 var reactVirtual = require('@tanstack/react-virtual');
 var usehooksTs = require('usehooks-ts');
 var reactRouter = require('@tanstack/react-router');
 var react$1 = require('@floating-ui/react');
-var esToolkit = require('es-toolkit');
 var tailwindMerge = require('tailwind-merge');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
@@ -279,6 +279,8 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
  * Hook to detect if text content is wrapping to multiple lines
  *
  * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for wrapping (default: false)
  * @returns {{
  *   ref: RefObject<TElement | null>;
  *   isTooltipVisible: boolean;
@@ -286,7 +288,8 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
  * - `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 useIsTextWrapping = (options = {}) => {
+    const { skip = false } = options;
     const ref = react.useRef(null);
     const [isTextWrapping, setIsTextWrapping] = react.useState(false);
     const setTextWrappingState = react.useCallback(() => {
@@ -297,7 +300,7 @@ const useIsTextWrapping = () => {
         setIsTextWrapping(clientHeight > scrollHeight / 2);
     }, []);
     react.useEffect(() => {
-        if (!ref.current) {
+        if (skip || !ref.current) {
             return;
         }
         // Perform an immediate measurement on mount.
@@ -311,8 +314,8 @@ const useIsTextWrapping = () => {
         observer.observe(ref.current);
         // Clean up on unmount
         return () => observer.disconnect();
-    }, [setTextWrappingState]);
-    return { ref, isTextWrapping };
+    }, [setTextWrappingState, skip]);
+    return react.useMemo(() => ({ ref, isTextWrapping }), [isTextWrapping]);
 };
 
 const cvaText = cssClassVarianceUtilities.cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
@@ -1074,6 +1077,8 @@ const createBreakpointState = ({ width }) => {
  * an object with boolean values indicating which breakpoints are currently active.
  *
  * @param {RefObject<HTMLElement>} ref - Reference to the container element to observe
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for breakpoint changes (default: false)
  * @returns {BreakpointState} An object containing boolean values for each container size breakpoint.
  * @example
  * const MyComponent = () => {
@@ -1093,7 +1098,8 @@ const createBreakpointState = ({ width }) => {
  *   );
  * }
  */
-const useContainerBreakpoints = (ref) => {
+const useContainerBreakpoints = (ref, options = {}) => {
+    const { skip = false } = options;
     const [containerSize, setContainerSize] = react.useState(() => defaultBreakpointState);
     react.useEffect(() => {
         if (process.env.NODE_ENV === "development" && !ref.current) {
@@ -1110,6 +1116,9 @@ const useContainerBreakpoints = (ref) => {
         setContainerSize(createBreakpointState({ width }));
     }, [ref]);
     react.useEffect(() => {
+        if (skip) {
+            return;
+        }
         const element = ref.current;
         if (!element) {
             return;
@@ -1122,7 +1131,7 @@ const useContainerBreakpoints = (ref) => {
         return () => {
             resizeObserver.disconnect();
         };
-    }, [updateContainerSize, ref]);
+    }, [updateContainerSize, ref, skip]);
     return containerSize;
 };
 
@@ -1134,7 +1143,7 @@ const useContainerBreakpoints = (ref) => {
  * @param {number} options.duration - Duration of the timeout in milliseconds.
  * @returns {object} An object containing functions to start and stop the timeout.
  */
-const useTimeout = ({ onTimeout, duration }) => {
+const useTimeout = ({ onTimeout, duration, }) => {
     const ready = react.useRef(false);
     const timeout = react.useRef(null);
     const callback = react.useRef(onTimeout);
@@ -1166,7 +1175,7 @@ const useTimeout = ({ onTimeout, duration }) => {
             }
         };
     }, []);
-    return { startTimeout, stopTimeout };
+    return react.useMemo(() => ({ startTimeout, stopTimeout }), [startTimeout, stopTimeout]);
 };
 
 /**
@@ -1179,20 +1188,9 @@ const useTimeout = ({ onTimeout, duration }) => {
  * @param {number} options.maxRetries - Maximum number of retry attempts.
  * @returns {object} An object containing functions to start and stop the timeout, current retry count, and the timeout status.
  */
-const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries }) => {
+const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries, }) => {
     const retries = react.useRef(0);
     const [isRunning, setIsRunning] = react.useState(false); // Track the timeout status
-    const stopTimeouts = () => {
-        stopTimeout();
-        setIsRunning(false); // Update the status when stopped
-    };
-    const startTimeouts = () => {
-        if (isRunning) {
-            return; // Prevent multiple timeouts from running
-        }
-        startTimeout();
-        setIsRunning(true); // Update the status when started
-    };
     const { startTimeout, stopTimeout } = useTimeout({
         duration,
         onTimeout: () => {
@@ -1209,14 +1207,25 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
             }
         },
     });
-    return {
+    const stopTimeouts = react.useCallback(() => {
+        stopTimeout();
+        setIsRunning(false); // Update the status when stopped
+    }, [stopTimeout]);
+    const startTimeouts = react.useCallback(() => {
+        if (isRunning) {
+            return; // Prevent multiple timeouts from running
+        }
+        startTimeout();
+        setIsRunning(true); // Update the status when started
+    }, [isRunning, startTimeout]);
+    return react.useMemo(() => ({
         startTimeouts,
         stopTimeouts,
         isRunning,
         get retries() {
             return retries.current;
         },
-    };
+    }), [startTimeouts, stopTimeouts, isRunning]);
 };
 
 /**
@@ -1264,8 +1273,11 @@ const useDebounce = (value, delay = 500, direction, onBounce) => {
 function useDevicePixelRatio(options) {
     const dpr = getDevicePixelRatio(options);
     const [currentDpr, setCurrentDpr] = react.useState(dpr);
-    const { defaultDpr, maxDpr, round } = options || {};
+    const { defaultDpr, maxDpr, round, skip = false } = options || {};
     react.useEffect(() => {
+        if (skip) {
+            return;
+        }
         const canListen = typeof window !== "undefined" && "matchMedia" in window;
         if (!canListen) {
             return;
@@ -1276,7 +1288,7 @@ function useDevicePixelRatio(options) {
         return () => {
             mediaMatcher.removeEventListener("change", updateDpr);
         };
-    }, [currentDpr, defaultDpr, maxDpr, round]);
+    }, [currentDpr, defaultDpr, maxDpr, round, skip]);
     return currentDpr;
 }
 /**
@@ -1303,8 +1315,8 @@ function getDevicePixelRatio(options) {
  * const [state, dispatch] = useElevatedReducer(reducer, initialState, elevatedReducerState);
  */
 const useElevatedReducer = (reducer, initialState, customState) => {
-    const fallbackState = react.useReducer(reducer, initialState);
-    return customState ?? fallbackState;
+    const [fallbackValue, fallbackDispatch] = react.useReducer(reducer, initialState);
+    return react.useMemo(() => customState ?? [fallbackValue, fallbackDispatch], [customState, fallbackValue, fallbackDispatch]);
 };
 
 /**
@@ -1315,15 +1327,16 @@ const useElevatedReducer = (reducer, initialState, customState) => {
  * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
  */
 const useElevatedState = (initialState, customState) => {
-    const fallbackState = react.useState(initialState);
-    return react.useMemo(() => customState ?? fallbackState, [customState, fallbackState]);
+    const [fallbackValue, fallbackSetter] = react.useState(initialState);
+    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 } = {}) => {
+const useGeometry = (ref, { skip = false, onChange } = {}) => {
     const [geometry, setGeometry] = react.useState(() => {
         const rect = ref.current?.getBoundingClientRect();
         if (!rect) {
@@ -1351,6 +1364,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
     });
     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);
@@ -1361,7 +1375,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
         }
         // Update geometry immediately when element changes
         const elementRect = element.getBoundingClientRect();
-        setGeometry({
+        const newGeometry = {
             width: elementRect.width,
             height: elementRect.height,
             top: elementRect.top,
@@ -1370,13 +1384,23 @@ const useGeometry = (ref, { skip = false } = {}) => {
             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();
-                        setGeometry({
+                        const observedGeometry = {
                             width: entryRect.width,
                             height: entryRect.height,
                             top: entryRect.top,
@@ -1385,7 +1409,16 @@ const useGeometry = (ref, { skip = false } = {}) => {
                             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;
+                        }
                     }
                 });
             }
@@ -1397,7 +1430,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [element, skip]);
+    }, [element, onChange, skip]);
     return geometry;
 };
 
@@ -1412,13 +1445,17 @@ const useGeometry = (ref, { skip = false } = {}) => {
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = react.useState(false);
     const debouncedHovering = useDebounce(hovering, delay, direction);
-    const onMouseEnter = () => {
+    const onMouseEnter = react.useCallback(() => {
         setHovering(true);
-    };
-    const onMouseLeave = () => {
+    }, []);
+    const onMouseLeave = react.useCallback(() => {
         setHovering(false);
-    };
-    return { onMouseEnter, onMouseLeave, hovering: debounced ? debouncedHovering : hovering };
+    }, []);
+    return react.useMemo(() => ({
+        onMouseEnter,
+        onMouseLeave,
+        hovering: debounced ? debouncedHovering : hovering,
+    }), [onMouseEnter, onMouseLeave, debounced, debouncedHovering, hovering]);
 };
 
 const OVERSCAN = 10;
@@ -1433,6 +1470,7 @@ const DEFAULT_ROW_HEIGHT = 50;
  * @param props.estimateSize - Optional function to estimate item height.
  * @param props.overscan - Optional number of items to render outside the visible area.
  * @param props.onChange - Optional callback when virtualizer changes.
+ * @param props.skip - Whether to skip automatic loading of more data (default: false).
  * @returns {Virtualizer} The virtualizer instance with all its properties and methods.
  * @description
  * This hook is used to implement infinite scrolling in a table. It uses TanStack Virtual's
@@ -1446,7 +1484,7 @@ const DEFAULT_ROW_HEIGHT = 50;
  *   estimateSize: () => 35,
  * });
  */
-const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize, overscan, onChange, }) => {
+const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize, overscan, onChange, skip = false, }) => {
     const handleChange = react.useCallback((virtualizer) => {
         onChange?.(virtualizer);
     }, [onChange]);
@@ -1464,7 +1502,7 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
     const virtualItems = rowVirtualizer.getVirtualItems();
     // Auto-load more data based on scroll position and content height
     react.useEffect(() => {
-        if (pagination.pageInfo?.hasNextPage !== true || pagination.isLoading) {
+        if (skip || pagination.pageInfo?.hasNextPage !== true || pagination.isLoading) {
             return;
         }
         const container = scrollElementRef.current;
@@ -1480,6 +1518,7 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
             pagination.nextPage();
         }
     }, [
+        skip,
         pagination.pageInfo?.hasNextPage,
         pagination.nextPage,
         pagination.isLoading,
@@ -1527,6 +1566,8 @@ const useIsFullscreen = () => {
  * @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).
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for truncation (default: false)
  * @returns {{
  *   ref: Ref<TElement | null>;
  *   isTooltipVisible: boolean;
@@ -1534,7 +1575,7 @@ const useIsFullscreen = () => {
  * - `ref`: a ref to attach to the element you want to observe for truncation.
  * - `isTextTruncated`: a boolean indicating if the text is truncated.
  */
-const useIsTextTruncated = (text) => {
+const useIsTextTruncated = (text, { skip = false } = {}) => {
     const ref = react.useRef(null);
     const [isTextTruncated, setIsTextTruncated] = react.useState(false);
     const updateTextVisibility = react.useCallback(() => {
@@ -1545,9 +1586,11 @@ const useIsTextTruncated = (text) => {
         setIsTextTruncated(scrollWidth > clientWidth);
     }, []);
     react.useEffect(() => {
-        if (!ref.current) {
+        if (skip || !ref.current) {
             return;
         }
+        // Perform an immediate measurement on mount
+        updateTextVisibility();
         // Observe resizing to check if truncation changes
         const observer = new ResizeObserver(() => {
             updateTextVisibility();
@@ -1555,15 +1598,15 @@ const useIsTextTruncated = (text) => {
         observer.observe(ref.current);
         // Clean up on unmount
         return () => observer.disconnect();
-    }, [updateTextVisibility]);
+    }, [updateTextVisibility, skip]);
     // Re-check whenever text changes
     react.useEffect(() => {
-        if (text === undefined || text === "") {
+        if (skip || text === undefined || text === "") {
             return;
         }
         updateTextVisibility();
-    }, [text, updateTextVisibility]);
-    return { ref, isTextTruncated };
+    }, [text, updateTextVisibility, skip]);
+    return react.useMemo(() => ({ ref, isTextTruncated }), [isTextTruncated]);
 };
 
 /**
@@ -1692,11 +1735,11 @@ const SCROLL_DEBOUNCE_TIME = 50;
  * Hook for detecting scroll values in horizontal or vertical direction.
  *
  * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
- * @param {object} options - Options object containing direction and onScrollStateChange callback
+ * @param {object} options - Options object containing direction, onScrollStateChange callback, and skip
  * @returns {object} An object containing if the element is scrollable, is at the beginning, is at the end, and its current scroll position.
  */
 const useScrollDetection = (elementRef, options) => {
-    const { direction = "vertical", onScrollStateChange } = options ?? {};
+    const { direction = "vertical", onScrollStateChange, skip = false } = options ?? {};
     const [isScrollable, setIsScrollable] = react.useState(false);
     const [isAtBeginning, setIsAtBeginning] = react.useState(true);
     const [isAtEnd, setIsAtEnd] = react.useState(false);
@@ -1757,6 +1800,9 @@ const useScrollDetection = (elementRef, options) => {
         });
     }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
     react.useEffect(() => {
+        if (skip) {
+            return;
+        }
         const element = elementRef?.current;
         if (!element) {
             return;
@@ -1776,7 +1822,7 @@ const useScrollDetection = (elementRef, options) => {
             }
             element.removeEventListener("scroll", debouncedCheckScrollPosition);
         };
-    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
+    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition, skip]);
     return react.useMemo(() => ({ isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
 };
 
@@ -1800,6 +1846,8 @@ const useSelfUpdatingRef = (initialState) => {
  * This hook listens to changes in the viewport size and returns an object with boolean values
  * indicating which breakpoints are currently active.
  *
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for viewport changes (default: false)
  * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
  * @example
  * const MyComponent = () => {
@@ -1812,7 +1860,8 @@ const useSelfUpdatingRef = (initialState) => {
  *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
  * }
  */
-const useViewportBreakpoints = () => {
+const useViewportBreakpoints = (options = {}) => {
+    const { skip = false } = options;
     const [viewportSize, setViewportSize] = react.useState(() => {
         const newViewportSize = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
             ...acc,
@@ -1828,6 +1877,9 @@ const useViewportBreakpoints = () => {
         setViewportSize(newViewportSize);
     }, []);
     react.useEffect(() => {
+        if (skip) {
+            return;
+        }
         // Initial check
         updateViewportSize();
         // Set up listeners for each breakpoint
@@ -1841,7 +1893,7 @@ const useViewportBreakpoints = () => {
                 mql.removeEventListener("change", updateViewportSize);
             });
         };
-    }, [updateViewportSize]);
+    }, [updateViewportSize, skip]);
     return viewportSize;
 };
 
@@ -1849,7 +1901,7 @@ const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
  */
-const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: undefined }) => {
+const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefined, onFocus: undefined }) => {
     const [focused, setFocused] = react.useState(hasFocus());
     const onFocusInternal = react.useCallback(() => {
         setFocused(hasFocus());
@@ -1860,6 +1912,9 @@ const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: u
         onBlur?.();
     }, [onBlur]);
     react.useEffect(() => {
+        if (skip) {
+            return;
+        }
         setFocused(hasFocus()); // Focus for additional renders
         window.addEventListener("focus", onFocusInternal);
         window.addEventListener("blur", onBlurInternal);
@@ -1867,7 +1922,7 @@ const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: u
             window.removeEventListener("focus", onFocusInternal);
             window.removeEventListener("blur", onBlurInternal);
         };
-    }, [onBlurInternal, onFocusInternal]);
+    }, [onBlurInternal, onFocusInternal, skip]);
     return react.useMemo(() => ({ focused }), [focused]);
 };
 
@@ -4484,7 +4539,7 @@ function ActionRenderer({ action, isMenuItem = false, 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 }));
+        }, prefix: prefixIconName ? jsxRuntime.jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", 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
@@ -4496,12 +4551,17 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
  * @param {object} props - The props for the PageHeaderSecondaryActions component
  * @param {Array<PageHeaderSecondaryActionType>} props.actions - The secondary actions to render
  * @param {boolean} [props.hasPrimaryAction] - Whether there is a primary action present
- * @returns {ReactElement} PageHeaderSecondaryActions component
+ * @param {boolean} [props.groupActions] - Whether to group actions in a More Menu regardless of action count
+ * @returns {ReactElement | null} PageHeaderSecondaryActions component
  */
-const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, }) => {
+const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupActions = false, }) => {
     const enabledActions = react.useMemo(() => actions.filter(action => action.hidden === false || action.hidden === undefined), [actions]);
-    // If we need to render a "More Menu" because we have too many actions:
-    if (enabledActions.length > 2 || (hasPrimaryAction && enabledActions.length > 1)) {
+    // If there are no enabled actions, don't render anything
+    if (enabledActions.length === 0) {
+        return null;
+    }
+    // If we need to render a "More Menu" because we have too many actions or grouping is requested:
+    if (groupActions || 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") {
@@ -4561,7 +4621,7 @@ const PageHeaderTitle = ({ title, dataTestId }) => {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, secondaryActions, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", kpiMetrics, tagTooltipLabel, primaryAction, }) => {
+const PageHeader = ({ className, dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, ...discriminatedProps }) => {
     const tagRenderer = react.useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             return null;
@@ -4572,10 +4632,14 @@ const PageHeader = ({ className, dataTestId, secondaryActions, showLoading = fal
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "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: "medium", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsxRuntime.jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "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 !== null && description !== undefined) ? (jsxRuntime.jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     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 !== null && secondaryActions !== undefined ? (secondaryActions) : null, primaryAction !== undefined && (primaryAction.hidden === false || primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, { disabled: primaryAction.tooltipLabel === undefined || primaryAction.tooltipLabel === "", label: primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName !== undefined ? (jsxRuntime.jsx(Icon, { name: primaryAction.prefixIconName, size: "small" })) : undefined, size: "medium", variant: primaryAction.variant, children: primaryAction.actionText }) })) : null] })] }), tabsList] }));
+                                }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxRuntime.jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsxRuntime.jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (jsxRuntime.jsx(PageHeaderSecondaryActions, { actions: discriminatedProps.secondaryActions, groupActions: discriminatedProps.groupSecondaryActions ?? false, hasPrimaryAction: !!discriminatedProps.primaryAction })) : discriminatedProps.secondaryActions !== null && discriminatedProps.secondaryActions !== undefined ? (discriminatedProps.secondaryActions) : null) : null, discriminatedProps.accessoryType === "actions" &&
+                                discriminatedProps.primaryAction !== undefined &&
+                                (discriminatedProps.primaryAction.hidden === false ||
+                                    discriminatedProps.primaryAction.hidden === undefined) ? (jsxRuntime.jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
+                                    discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsxRuntime.jsx(Button, { dataTestId: discriminatedProps.primaryAction.dataTestId, disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsxRuntime.jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);