@trackunit/react-components 1.10.5 → 1.10.11

package/index.esm.js

@@ -10,11 +10,11 @@ import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
+import { isEqual, omit } from 'es-toolkit';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useDebounceCallback, useCopyToClipboard } from 'usehooks-ts';
 import { Link, useBlocker } from '@tanstack/react-router';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
-import { omit } from 'es-toolkit';
 import { twMerge } from 'tailwind-merge';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
@@ -252,14 +252,14 @@ const Tag = ({ className, dataTestId, children, size = "medium", onClose, color
         return false;
     }, [color]);
     const layout = useMemo(() => {
-        if (onClose !== undefined && isSupportedDismissColor) {
+        if (onClose !== undefined && isSupportedDismissColor && !disabled) {
             return "containsDismiss";
         }
         if (icon !== null && icon !== undefined) {
             return "containsIcon";
         }
         return "default";
-    }, [onClose, icon, isSupportedDismissColor]);
+    }, [onClose, isSupportedDismissColor, disabled, icon]);
     return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), children: icon })) : null, jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
             jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
@@ -277,6 +277,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;
@@ -284,7 +286,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 = useRef(null);
     const [isTextWrapping, setIsTextWrapping] = useState(false);
     const setTextWrappingState = useCallback(() => {
@@ -295,7 +298,7 @@ const useIsTextWrapping = () => {
         setIsTextWrapping(clientHeight > scrollHeight / 2);
     }, []);
     useEffect(() => {
-        if (!ref.current) {
+        if (skip || !ref.current) {
             return;
         }
         // Perform an immediate measurement on mount.
@@ -309,8 +312,8 @@ const useIsTextWrapping = () => {
         observer.observe(ref.current);
         // Clean up on unmount
         return () => observer.disconnect();
-    }, [setTextWrappingState]);
-    return { ref, isTextWrapping };
+    }, [setTextWrappingState, skip]);
+    return useMemo(() => ({ ref, isTextWrapping }), [isTextWrapping]);
 };
 
 const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-normal"], {
@@ -1072,6 +1075,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 = () => {
@@ -1091,7 +1096,8 @@ const createBreakpointState = ({ width }) => {
  *   );
  * }
  */
-const useContainerBreakpoints = (ref) => {
+const useContainerBreakpoints = (ref, options = {}) => {
+    const { skip = false } = options;
     const [containerSize, setContainerSize] = useState(() => defaultBreakpointState);
     useEffect(() => {
         if (process.env.NODE_ENV === "development" && !ref.current) {
@@ -1108,6 +1114,9 @@ const useContainerBreakpoints = (ref) => {
         setContainerSize(createBreakpointState({ width }));
     }, [ref]);
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         const element = ref.current;
         if (!element) {
             return;
@@ -1120,7 +1129,7 @@ const useContainerBreakpoints = (ref) => {
         return () => {
             resizeObserver.disconnect();
         };
-    }, [updateContainerSize, ref]);
+    }, [updateContainerSize, ref, skip]);
     return containerSize;
 };
 
@@ -1132,7 +1141,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 = useRef(false);
     const timeout = useRef(null);
     const callback = useRef(onTimeout);
@@ -1164,7 +1173,7 @@ const useTimeout = ({ onTimeout, duration }) => {
             }
         };
     }, []);
-    return { startTimeout, stopTimeout };
+    return useMemo(() => ({ startTimeout, stopTimeout }), [startTimeout, stopTimeout]);
 };
 
 /**
@@ -1177,20 +1186,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 = useRef(0);
     const [isRunning, setIsRunning] = 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: () => {
@@ -1207,14 +1205,25 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
             }
         },
     });
-    return {
+    const stopTimeouts = useCallback(() => {
+        stopTimeout();
+        setIsRunning(false); // Update the status when stopped
+    }, [stopTimeout]);
+    const startTimeouts = useCallback(() => {
+        if (isRunning) {
+            return; // Prevent multiple timeouts from running
+        }
+        startTimeout();
+        setIsRunning(true); // Update the status when started
+    }, [isRunning, startTimeout]);
+    return useMemo(() => ({
         startTimeouts,
         stopTimeouts,
         isRunning,
         get retries() {
             return retries.current;
         },
-    };
+    }), [startTimeouts, stopTimeouts, isRunning]);
 };
 
 /**
@@ -1262,8 +1271,11 @@ const useDebounce = (value, delay = 500, direction, onBounce) => {
 function useDevicePixelRatio(options) {
     const dpr = getDevicePixelRatio(options);
     const [currentDpr, setCurrentDpr] = useState(dpr);
-    const { defaultDpr, maxDpr, round } = options || {};
+    const { defaultDpr, maxDpr, round, skip = false } = options || {};
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         const canListen = typeof window !== "undefined" && "matchMedia" in window;
         if (!canListen) {
             return;
@@ -1274,7 +1286,7 @@ function useDevicePixelRatio(options) {
         return () => {
             mediaMatcher.removeEventListener("change", updateDpr);
         };
-    }, [currentDpr, defaultDpr, maxDpr, round]);
+    }, [currentDpr, defaultDpr, maxDpr, round, skip]);
     return currentDpr;
 }
 /**
@@ -1301,8 +1313,8 @@ function getDevicePixelRatio(options) {
  * const [state, dispatch] = useElevatedReducer(reducer, initialState, elevatedReducerState);
  */
 const useElevatedReducer = (reducer, initialState, customState) => {
-    const fallbackState = useReducer(reducer, initialState);
-    return customState ?? fallbackState;
+    const [fallbackValue, fallbackDispatch] = useReducer(reducer, initialState);
+    return useMemo(() => customState ?? [fallbackValue, fallbackDispatch], [customState, fallbackValue, fallbackDispatch]);
 };
 
 /**
@@ -1313,15 +1325,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 = useState(initialState);
-    return useMemo(() => customState ?? fallbackState, [customState, fallbackState]);
+    const [fallbackValue, fallbackSetter] = useState(initialState);
+    return useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
+const UNINITIALIZED = Symbol("UNINITIALIZED");
 /**
  * Custom hook to get the geometry of an element.
  * Size and position of the element relative to the viewport.
  */
-const useGeometry = (ref, { skip = false } = {}) => {
+const useGeometry = (ref, { skip = false, onChange } = {}) => {
     const [geometry, setGeometry] = useState(() => {
         const rect = ref.current?.getBoundingClientRect();
         if (!rect) {
@@ -1349,6 +1362,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
     });
     const resizeObserver = useRef(null);
     const [element, setElement] = useState(ref.current);
+    const prevGeometry = useRef(UNINITIALIZED);
     // Track changes to ref.current on every render
     if (ref.current !== element) {
         setElement(ref.current);
@@ -1359,7 +1373,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,
@@ -1368,13 +1382,23 @@ const useGeometry = (ref, { skip = false } = {}) => {
             right: elementRect.right,
             x: elementRect.x,
             y: elementRect.y,
-        });
+        };
+        const prev = prevGeometry.current;
+        const hasChanged = prev === UNINITIALIZED ? false : !isEqual(newGeometry, prev);
+        if (!hasChanged && prev !== UNINITIALIZED) {
+            return;
+        }
+        setGeometry(newGeometry);
+        if (hasChanged && prev !== UNINITIALIZED) {
+            onChange?.(newGeometry);
+        }
+        prevGeometry.current = newGeometry;
         const observe = () => {
             if (!resizeObserver.current) {
                 resizeObserver.current = new ResizeObserver(entries => {
                     for (const entry of entries) {
                         const entryRect = entry.target.getBoundingClientRect();
-                        setGeometry({
+                        const observedGeometry = {
                             width: entryRect.width,
                             height: entryRect.height,
                             top: entryRect.top,
@@ -1383,7 +1407,16 @@ const useGeometry = (ref, { skip = false } = {}) => {
                             right: entryRect.right,
                             x: entryRect.x,
                             y: entryRect.y,
-                        });
+                        };
+                        const prevObserved = prevGeometry.current;
+                        const hasObservedChanged = prevObserved === UNINITIALIZED ? false : !isEqual(observedGeometry, prevObserved);
+                        if (hasObservedChanged || prevObserved === UNINITIALIZED) {
+                            setGeometry(observedGeometry);
+                            if (hasObservedChanged && prevObserved !== UNINITIALIZED) {
+                                onChange?.(observedGeometry);
+                            }
+                            prevGeometry.current = observedGeometry;
+                        }
                     }
                 });
             }
@@ -1395,7 +1428,7 @@ const useGeometry = (ref, { skip = false } = {}) => {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [element, skip]);
+    }, [element, onChange, skip]);
     return geometry;
 };
 
@@ -1410,13 +1443,17 @@ const useGeometry = (ref, { skip = false } = {}) => {
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = useState(false);
     const debouncedHovering = useDebounce(hovering, delay, direction);
-    const onMouseEnter = () => {
+    const onMouseEnter = useCallback(() => {
         setHovering(true);
-    };
-    const onMouseLeave = () => {
+    }, []);
+    const onMouseLeave = useCallback(() => {
         setHovering(false);
-    };
-    return { onMouseEnter, onMouseLeave, hovering: debounced ? debouncedHovering : hovering };
+    }, []);
+    return useMemo(() => ({
+        onMouseEnter,
+        onMouseLeave,
+        hovering: debounced ? debouncedHovering : hovering,
+    }), [onMouseEnter, onMouseLeave, debounced, debouncedHovering, hovering]);
 };
 
 const OVERSCAN = 10;
@@ -1431,6 +1468,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
@@ -1444,7 +1482,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 = useCallback((virtualizer) => {
         onChange?.(virtualizer);
     }, [onChange]);
@@ -1462,7 +1500,7 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
     const virtualItems = rowVirtualizer.getVirtualItems();
     // Auto-load more data based on scroll position and content height
     useEffect(() => {
-        if (pagination.pageInfo?.hasNextPage !== true || pagination.isLoading) {
+        if (skip || pagination.pageInfo?.hasNextPage !== true || pagination.isLoading) {
             return;
         }
         const container = scrollElementRef.current;
@@ -1478,6 +1516,7 @@ const useInfiniteScroll = ({ pagination, scrollElementRef, count, estimateSize,
             pagination.nextPage();
         }
     }, [
+        skip,
         pagination.pageInfo?.hasNextPage,
         pagination.nextPage,
         pagination.isLoading,
@@ -1525,6 +1564,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;
@@ -1532,7 +1573,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 = useRef(null);
     const [isTextTruncated, setIsTextTruncated] = useState(false);
     const updateTextVisibility = useCallback(() => {
@@ -1543,9 +1584,11 @@ const useIsTextTruncated = (text) => {
         setIsTextTruncated(scrollWidth > clientWidth);
     }, []);
     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();
@@ -1553,15 +1596,15 @@ const useIsTextTruncated = (text) => {
         observer.observe(ref.current);
         // Clean up on unmount
         return () => observer.disconnect();
-    }, [updateTextVisibility]);
+    }, [updateTextVisibility, skip]);
     // Re-check whenever text changes
     useEffect(() => {
-        if (text === undefined || text === "") {
+        if (skip || text === undefined || text === "") {
             return;
         }
         updateTextVisibility();
-    }, [text, updateTextVisibility]);
-    return { ref, isTextTruncated };
+    }, [text, updateTextVisibility, skip]);
+    return useMemo(() => ({ ref, isTextTruncated }), [isTextTruncated]);
 };
 
 /**
@@ -1690,11 +1733,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] = useState(false);
     const [isAtBeginning, setIsAtBeginning] = useState(true);
     const [isAtEnd, setIsAtEnd] = useState(false);
@@ -1755,6 +1798,9 @@ const useScrollDetection = (elementRef, options) => {
         });
     }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         const element = elementRef?.current;
         if (!element) {
             return;
@@ -1774,7 +1820,7 @@ const useScrollDetection = (elementRef, options) => {
             }
             element.removeEventListener("scroll", debouncedCheckScrollPosition);
         };
-    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
+    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition, skip]);
     return useMemo(() => ({ isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
 };
 
@@ -1798,6 +1844,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 = () => {
@@ -1810,7 +1858,8 @@ const useSelfUpdatingRef = (initialState) => {
  *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
  * }
  */
-const useViewportBreakpoints = () => {
+const useViewportBreakpoints = (options = {}) => {
+    const { skip = false } = options;
     const [viewportSize, setViewportSize] = useState(() => {
         const newViewportSize = objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
             ...acc,
@@ -1826,6 +1875,9 @@ const useViewportBreakpoints = () => {
         setViewportSize(newViewportSize);
     }, []);
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         // Initial check
         updateViewportSize();
         // Set up listeners for each breakpoint
@@ -1839,7 +1891,7 @@ const useViewportBreakpoints = () => {
                 mql.removeEventListener("change", updateViewportSize);
             });
         };
-    }, [updateViewportSize]);
+    }, [updateViewportSize, skip]);
     return viewportSize;
 };
 
@@ -1847,7 +1899,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] = useState(hasFocus());
     const onFocusInternal = useCallback(() => {
         setFocused(hasFocus());
@@ -1858,6 +1910,9 @@ const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: u
         onBlur?.();
     }, [onBlur]);
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         setFocused(hasFocus()); // Focus for additional renders
         window.addEventListener("focus", onFocusInternal);
         window.addEventListener("blur", onBlurInternal);
@@ -1865,7 +1920,7 @@ const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: u
             window.removeEventListener("focus", onFocusInternal);
             window.removeEventListener("blur", onBlurInternal);
         };
-    }, [onBlurInternal, onFocusInternal]);
+    }, [onBlurInternal, onFocusInternal, skip]);
     return useMemo(() => ({ focused }), [focused]);
 };
 
@@ -4482,7 +4537,7 @@ function ActionRenderer({ action, isMenuItem = false, 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 }));
+        }, prefix: prefixIconName ? jsx(Icon, { name: prefixIconName, size: "small" }) : undefined, size: "small", 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
@@ -4494,12 +4549,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 = 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") {
@@ -4559,7 +4619,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 = useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             return null;
@@ -4570,10 +4630,14 @@ const PageHeader = ({ className, dataTestId, secondaryActions, showLoading = fal
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "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: "medium", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { dataTestId: dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "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 !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     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 !== null && secondaryActions !== undefined ? (secondaryActions) : null, primaryAction !== undefined && (primaryAction.hidden === false || primaryAction.hidden === undefined) ? (jsx(Tooltip, { disabled: primaryAction.tooltipLabel === undefined || primaryAction.tooltipLabel === "", label: primaryAction.tooltipLabel, children: jsx(Button, { dataTestId: primaryAction.dataTestId, disabled: primaryAction.disabled, loading: primaryAction.loading, onClick: () => primaryAction.actionCallback?.(), prefix: primaryAction.prefixIconName !== undefined ? (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, jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (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) ? (jsx(Tooltip, { disabled: discriminatedProps.primaryAction.tooltipLabel === undefined ||
+                                    discriminatedProps.primaryAction.tooltipLabel === "", label: discriminatedProps.primaryAction.tooltipLabel, children: jsx(Button, { dataTestId: discriminatedProps.primaryAction.dataTestId, disabled: discriminatedProps.primaryAction.disabled, loading: discriminatedProps.primaryAction.loading, onClick: () => discriminatedProps.primaryAction?.actionCallback?.(), prefix: discriminatedProps.primaryAction.prefixIconName !== undefined ? (jsx(Icon, { name: discriminatedProps.primaryAction.prefixIconName, size: "small" })) : undefined, size: "small", variant: discriminatedProps.primaryAction.variant, children: discriminatedProps.primaryAction.actionText }) })) : null] })] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.5",
+  "version": "1.10.11",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.44",
-    "@trackunit/css-class-variance-utilities": "1.7.44",
-    "@trackunit/shared-utils": "1.9.44",
-    "@trackunit/ui-icons": "1.7.45",
-    "@trackunit/react-test-setup": "1.4.44",
+    "@trackunit/ui-design-tokens": "1.7.46",
+    "@trackunit/css-class-variance-utilities": "1.7.46",
+    "@trackunit/shared-utils": "1.9.46",
+    "@trackunit/ui-icons": "1.7.47",
+    "@trackunit/react-test-setup": "1.4.46",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

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

@@ -10,4 +10,4 @@ import { PageHeaderProps } from "./types";
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }: PageHeaderProps) => ReactElement;
+export declare const PageHeader: ({ className, dataTestId, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, tagTooltipLabel, ...discriminatedProps }: PageHeaderProps) => ReactElement;

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

@@ -1,5 +1,10 @@
 import { ReactElement } from "react";
 import { PageHeaderSecondaryActionType } from "../types";
+export type PageHeaderSecondaryActionsProps = {
+    actions: Array<PageHeaderSecondaryActionType>;
+    hasPrimaryAction?: boolean;
+    groupActions?: boolean;
+};
 type ActionRendererProps = {
     action: PageHeaderSecondaryActionType;
     /**
@@ -26,10 +31,8 @@ export declare function ActionRenderer({ action, isMenuItem, 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
  */
-export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, }: {
-    actions: Array<PageHeaderSecondaryActionType>;
-    hasPrimaryAction?: boolean;
-}) => ReactElement;
+export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, groupActions, }: PageHeaderSecondaryActionsProps) => ReactElement | null;
 export {};