@trackunit/react-components 1.4.23 → 1.4.28

package/index.esm.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, forwardRef, useState, useCallback, createElement, useReducer, memo, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -7,6 +6,7 @@ import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
@@ -130,7 +130,7 @@ const isSafari = () => {
  * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
  *
  * @param {IconProps} props - The props for the Icon component
- * @returns {JSX.Element} Icon component
+ * @returns {ReactElement} Icon component
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
@@ -238,15 +238,15 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  *  The tag is also used in multiselect components to show selected options.
  *
  *  **Do:** Use short labels for easy scanning.
- 
+ *
  * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
+ * @returns {ReactElement} tag component
  */
-const Tag = forwardRef(({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false }, ref) => {
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, }) => {
     return (jsxs("span", { className: cvaTag({ className, size, color, layout: onClose ? "withIcon" : "default" }), "data-testid": dataTestId, ref: ref, children: [children, Boolean(onClose) && !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: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
-});
+};
 Tag.displayName = "Tag";
 
 /**
@@ -355,11 +355,11 @@ const cvaText = cvaMerge(["text-black", "m-0", "relative", "text-sm", "font-norm
  *  ### When to use
  *
  *  Use Text when you want to show a text section, use Heading if you want to show a heading.
- 
+ *
  * @param {TextProps} props - The props for the Text component
- * @returns {JSX.Element} Text component
+ * @returns {ReactElement} Text component
  */
-const Text = forwardRef(({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ...rest }, ref) => {
+const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, disabled = false, className, dataTestId, ref, ...rest }) => {
     return createElement(type, {
         ref,
         className: cvaText({
@@ -377,7 +377,7 @@ const Text = forwardRef(({ children, type = "p", size = "medium", align = "left"
         "data-testid": dataTestId,
         ...rest,
     }, children);
-});
+};
 Text.displayName = "Text";
 
 const cvaSpinner = cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
@@ -429,7 +429,7 @@ const cvaSpinnerLabel = cvaMerge(["self-center", "text-center", "text-current"])
  * Use when retrieving or refreshing small data amounts, such as status.
  
  * @param {SpinnerProps} props - The props for the Spinner component
- * @returns {JSX.Element} Spinner component
+ * @returns {ReactElement} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", label, }) => {
     return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
@@ -699,9 +699,9 @@ const cvaIconButton = cvaMerge([], {
  * Do not use buttons as navigational elements. Instead, use [Links](https://www.notion.so/Links-49638788b6c042698b40b94a318361f1?pvs=21) when the desired action is to take the user to a new page.
  *
  * @param {ButtonProps} props - The props for the Button component
- * @returns {JSX.Element} Button component
+ * @returns {ReactElement} Button component
  */
-const Button = forwardRef(({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ...rest }, ref) => {
+const Button = ({ onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular, ref, ...rest }) => {
     const Comp = asChild ? Slot : "button";
     const sharedCompProps = {
         ref,
@@ -720,24 +720,27 @@ const Button = forwardRef(({ onClick, children, loading, disabled, className, fu
         type,
     };
     return (jsxs(Comp, { ...sharedCompProps, ...(asChild ? {} : buttonSpecificProps), children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: prefix }) : null, jsx(Slottable, { children: children }), suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size, variant }), children: suffix }) : null] }));
-});
+};
 Button.displayName = "Button";
 
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  */
-const IconButton = forwardRef(({ icon, size = "medium", square = true, loading, disabled, className, ...rest }, ref) => {
+/**
+ *
+ */
+const IconButton = ({ icon, size = "medium", square = true, loading, disabled, className, ref, ...rest }) => {
     return (jsx(Button, { className: cvaIconButton({ size: size, className }), disabled: disabled || loading, loading: loading, 
         // eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
         prefix: !loading ? icon : undefined, ref: ref, size: size, square: square, ...rest }));
-});
+};
 IconButton.displayName = "IconButton";
 
 /**
  * The StarButton component is used for favorite actions or similar.
- 
+ *
  * @param {StarButtonProps} props - The props for the StarButton component
- * @returns {JSX.Element} StarButton component
+ * @returns {ReactElement} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
     return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
@@ -771,9 +774,9 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min
 
 /**
  * The Alert component should be used to inform the user of important information.
- 
+ *
  * @param {AlertProps} props - The props for the Alert component
- * @returns {JSX.Element} Alert component
+ * @returns {ReactElement} Alert component
  */
 const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = useRef(null);
@@ -838,7 +841,7 @@ const cvaBadge = cvaMerge([
  * The Badge component is used to display a notification badge with an optional number value.
  
  * @param {BadgeProps} props - The props for the Badge component
- * @returns {JSX.Element} Badge component
+ * @returns {ReactElement} Badge component
  */
 const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId }) => {
     if (hideZero && count === 0) {
@@ -981,7 +984,7 @@ const useContainerBreakpoints = (ref) => {
  */
 const useTimeout = ({ onTimeout, duration }) => {
     const ready = useRef(false);
-    const timeout = useRef();
+    const timeout = useRef(null);
     const callback = useRef(onTimeout);
     const startTimeout = useCallback(() => {
         ready.current = false;
@@ -1267,7 +1270,7 @@ const useIsFullscreen = () => {
  * @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>;
+ *   ref: Ref<TElement | null>;
  *   isTooltipVisible: boolean;
  * }} An object with:
  * - `ref`: a ref to attach to the element you want to observe for truncation.
@@ -1353,9 +1356,9 @@ const useScrollDetection = (elementRef) => {
     const [isAtTop, setIsAtTop] = useState(true);
     const [isAtBottom, setIsAtBottom] = useState(false);
     const [scrollPosition, setScrollPosition] = useState({ top: 0, bottom: 0 });
-    const observerRef = useRef();
+    const observerRef = useRef(null);
     const checkScrollable = useCallback(() => {
-        const element = elementRef.current;
+        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1363,7 +1366,7 @@ const useScrollDetection = (elementRef) => {
         setIsScrollable(hasOverflow);
     }, [elementRef]);
     const checkScrollPosition = useCallback(() => {
-        const element = elementRef.current;
+        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1374,7 +1377,7 @@ const useScrollDetection = (elementRef) => {
     }, [elementRef]);
     const debouncedCheckScrollPosition = useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
     useEffect(() => {
-        const element = elementRef.current;
+        const element = elementRef?.current;
         if (!element) {
             return;
         }
@@ -1589,7 +1592,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * Avoid using breadcrumbs to indicate forthcoming steps. For processes with sequential steps, use a wizard flow instead.
  *
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
- * @returns {JSX.Element} Breadcrumb component
+ * @returns {ReactElement} Breadcrumb component
  */
 const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
@@ -1711,9 +1714,9 @@ const ROLE_CARD = "region";
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
  * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
- 
+ *
  * @param {CardProps} props - The props for the Card component
- * @returns {JSX.Element} Card component
+ * @returns {ReactElement} Card component
  */
 const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }) => {
     return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: ROLE_CARD, ...rest, children: children }));
@@ -1725,7 +1728,7 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @summary For applying padding and gap to a Card.
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
  * @param {CardBodyProps} props - The props for the CardBody component
- * @returns {JSX.Element} CardBody component
+ * @returns {ReactElement} CardBody component
  */
 const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
     return (jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
@@ -1735,9 +1738,9 @@ const CardBody = ({ density = "auto", children, dataTestId, className, direction
  * A simple footer intended to use with Cards and Modals.
  * Currently only intended to contain Buttons.
  * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
- 
+ *
  * @param {CardFooterProps} props - The props for the CardFooter component
- * @returns {JSX.Element} CardFooter component
+ * @returns {ReactElement} CardFooter component
  */
 const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
     return (jsx("div", { className: cvaCardFooterDensityContainer({
@@ -1780,9 +1783,9 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
 
 /**
  * The Heading is used for a heading of a section (h1,h2,h3,h4).
- 
+ *
  * @param {HeadingProps} props - The props for the Heading component
- * @returns {JSX.Element} Heading component
+ * @returns {ReactElement} Heading component
  */
 const Heading = ({ variant = "primary", inverted = false, subtle = false, className, dataTestId, ...rest }) => {
     const semanticType = {
@@ -1800,9 +1803,9 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
 
 /**
  * Header for Cards and Modals.
- 
+ *
  * @param {CardHeaderProps} props - The props for the CardHeader component
- * @returns {JSX.Element} CardHeader component
+ * @returns {ReactElement} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
     return (jsx("div", { className: cvaCardHeaderDensityContainer({
@@ -1884,7 +1887,7 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  * - To creating hierarchy levels by nesting them within each other.
  *
  * @param {CollapseProps} props - The props for the Collapse component
- * @returns {JSX.Element} Collapse component
+ * @returns {ReactElement} Collapse component
  */
 const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = uuidv4();
@@ -1958,7 +1961,7 @@ const cvaCopyableText = cvaMerge([
  * The CopyableText component is used where the user should have easy access to copy information.
  
  * @param {CopyableTextProps} props - The props for the CopyableText component
- * @returns {JSX.Element} CopyableText component
+ * @returns {ReactElement} CopyableText component
  */
 const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     const value = alternativeText ?? text ?? "";
@@ -2108,7 +2111,7 @@ const cvaEmptyValue = cvaMerge(["text-gray-400"]);
  *  Show intentionality in empty values in the UI
  *
  * @param {EmptyValueProps} props - The props for the EmptyValue component
- * @returns {JSX.Element} EmptyValue component
+ * @returns {ReactElement} EmptyValue component
  */
 const EmptyValue = ({ className, dataTestId }) => {
     return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
@@ -2120,7 +2123,7 @@ const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-p
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  
  * @param {ExternalLinkProps} props - The props for the external link component
- * @returns {JSX.Element} External Link component
+ * @returns {ReactElement} External Link component
  */
 const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
     return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
@@ -2286,6 +2289,7 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
     const resolvedDismissal = typeof dismissal === "function" ? dismissal(DEFAULT_DISMISSAL) : dismissal;
     const clickInteraction = useClick(popoverContext, {
         enabled: resolvedActivation.click,
+        keyboardHandlers: resolvedActivation.keyboardHandlers,
     });
     const dismissInteraction = useDismiss(popoverContext, resolvedDismissal);
     const hoverInteraction = useHover$1(popoverContext, {
@@ -2344,7 +2348,7 @@ const usePopoverContext = () => {
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
  * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider containing the children
+ * @returns {ReactElement} A Popover Context Provider containing the children
  */
 const Popover = ({ children, isModal = false, ...restOptions }) => {
     const popover = usePopover({ isModal, ...restOptions });
@@ -2391,7 +2395,10 @@ const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1
 });
 const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
 
-const PopoverContent = forwardRef(function PopoverContent({ className, dataTestId, children, portalId, ...props }, propRef) {
+/**
+ *
+ */
+const PopoverContent = function PopoverContent({ className, dataTestId, children, portalId, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
     return (jsx(Portal, { id: portalId, children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps.dataTestId ?? "popover-content", ref: ref, style: {
@@ -2401,23 +2408,27 @@ const PopoverContent = forwardRef(function PopoverContent({ className, dataTestI
                     width: "max-content",
                     ...props.style,
                 }, ...context.getFloatingProps(props), children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children }) })) : null }));
-});
+};
 
 /**
  * The PopoverTitle component.
- 
+ *
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
- * @returns {JSX.Element} PopoverTitle component
+ * @returns {ReactElement} PopoverTitle component
  */
 const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
     return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), size: "small", subtle: true, type: "div", uppercase: true, weight: "bold", children: children }), action] }));
 };
 
-const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButton, ...props }, propRef) {
+/**
+ * The PopoverTrigger component is used to trigger the popover.
+ *
+ * @param {PopoverTriggerProps} props - The props for the PopoverTrigger component
+ * @returns {ReactElement} PopoverTrigger component
+ */
+const PopoverTrigger = function PopoverTrigger({ children, renderButton, ref: propRef, ...props }) {
     const context = usePopoverContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
-    const childrenRef = children.ref;
-    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    const ref = useMergeRefs([context.refs.setReference, propRef]);
     if (!renderButton && isValidElement(children)) {
         return cloneElement(children, context.getReferenceProps({
             ref,
@@ -2426,10 +2437,8 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
             "data-state": context.isOpen ? "open" : "closed",
         }));
     }
-    else {
-        return (jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
-    }
-});
+    return (jsx(Button, { "data-state": context.isOpen ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
+};
 
 const cvaTooltipContainer = cvaMerge(["flex", "leading-5"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
@@ -2486,7 +2495,7 @@ const cvaTooltipPopoverContent = cvaMerge(["max-w-sm", "rounded", "p-2"], {
 /**
  *
  * @description Adding Tooltip Arrow
- * @returns {JSX.Element} Tooltip floating Arrow
+ * @returns {ReactElement} Tooltip floating Arrow
  */
 const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
     const { context: floatingContext } = usePopoverContext();
@@ -2502,7 +2511,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  *
  * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
+ * @returns {ReactElement} Tooltip component
  */
 const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label, placement = "auto", mode = "dark", iconProps, id, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -2657,7 +2666,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
  
  * @param {IndicatorProps} props - The props for the Indicator component
- * @returns {JSX.Element} Indicator component
+ * @returns {ReactElement} Indicator component
  */
 const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, className, ...rest }) => {
     return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
@@ -2724,7 +2733,7 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex flex-row items-cen
  * The KPICard component is used to display KPIs.
  *
  * @param {KPICardProps} props - The props for the KPICard component
- * @returns {JSX.Element} KPICard component
+ * @returns {ReactElement} KPICard component
  */
 const KPICard = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, isActive, variant = "default", trend, onClick, ...rest }) => {
     const Comp = asChild ? Slot : "div";
@@ -2931,7 +2940,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
  * @param {MenuItemProps} props - The props for the MenuItem component
- * @returns {JSX.Element} MenuItem component
+ * @returns {ReactElement} MenuItem component
  */
 const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
@@ -2963,7 +2972,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
  * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
  *
  * @param {MenuListProps} props - The props for the MenuList component
- * @returns {JSX.Element} MenuList component
+ * @returns {ReactElement} MenuList component
  */
 const MenuList = ({ dataTestId, className, children, withStickyHeader = false, isMulti = false, selectedItems: controlledSelectedItems, onSelectionChange, ...args }) => {
     const childrenArr = Children.toArray(children);
@@ -3014,7 +3023,7 @@ const cvaMoreMenu = cvaMerge(["p-0"]);
  * Advice: fill it with MenuList
  *
  * @param {MoreMenuProps} props - The props for the MoreMenu component
- * @returns {JSX.Element} MoreMenu component
+ * @returns {ReactElement} MoreMenu component
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
@@ -3085,7 +3094,7 @@ const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center"
  * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
  
  * @param {NoticeProps} props - The props for the Notice component
- * @returns {JSX.Element} Notice component
+ * @returns {ReactElement} Notice component
  */
 const Notice = ({ dataTestId, icon, label, color = "neutral", withLabel = true, className, tooltipLabel = label, withTooltip = false, size = "medium", ...rest }) => {
     return (jsx(Tooltip, { className: className, disabled: !withTooltip, label: tooltipLabel, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaNotice(), "data-testid": dataTestId, ...rest, children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color, size }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] }) }));
@@ -3216,7 +3225,7 @@ const PageHeaderTitle = ({ title, dataTestId }) => {
  * 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
+ * @returns {ReactElement} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, secondaryActions, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, kpiMetrics, tagTooltipLabel, primaryAction, }) => {
     const tagRenderer = useMemo(() => {
@@ -3242,7 +3251,7 @@ const cvaPaginationText = cvaMerge("whitespace-nowrap");
  * Pagination Description. It could be used when you need navigation for your paging feature.
  
  * @param {PaginationProps} props - The props for the Pagination component
- * @returns {JSX.Element} Pagination component
+ * @returns {ReactElement} Pagination component
  */
 const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
     const [page, setPage] = useState(pageIndex);
@@ -3291,7 +3300,7 @@ const STROKE_WIDTH_THRESHOLD = 32;
  *  Draws an svg Polygon from a set of points.
  *
  * @param { PolygonProps} props - The props for the  Polygon component
- * @returns {JSX.Element}  Polygon component
+ * @returns {ReactElement}  Polygon component
  */
 const Polygon = ({ points, size, color = "black", opaque = true, className, dataTestId }) => {
     // Calculate the bounds of the points
@@ -3303,7 +3312,12 @@ const Polygon = ({ points, size, color = "black", opaque = true, className, data
     const sizeToNormalizeAgainst = size - strokeWidth * 2; // because strole is centered, so will be clipped on the outside otherwise
     // Normalize the points to fit within the viewBox
     const normalizedPoints = points
-        .map(([x, y]) => `${normalize({ value: x, min: minX, max: maxX, size: sizeToNormalizeAgainst })},${normalize({ value: y, min: minY, max: maxY, size: sizeToNormalizeAgainst })}`)
+        .map(([x, y]) => `${normalize({ value: x, min: minX, max: maxX, size: sizeToNormalizeAgainst })},${normalize({
+        value: y,
+        min: minY,
+        max: maxY,
+        size: sizeToNormalizeAgainst,
+    })}`)
         .join(" ");
     return (jsx("svg", { className: className, "data-testid": dataTestId, height: size, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsx("polygon", { points: normalizedPoints, style: {
                 fill: color,
@@ -3378,7 +3392,7 @@ const cvaSpacer = cvaMerge([], {
  * The Spacer component is used for adding a bit of space in the ui.
  
  * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
+ * @returns {ReactElement} Spacer component
  */
 const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
     return jsx("div", { className: cvaSpacer({ className, border, size }), "data-testid": dataTestId });
@@ -3388,7 +3402,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * The SectionHeader component is used on sections to set the section title.
  
  * @param {SectionHeaderProps} props - The props for the section header component
- * @returns {JSX.Element} SectionHeader component
+ * @returns {ReactElement} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
     return (jsxs("div", { className: "flex flex-col", children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { dataTestId: dataTestId, variant: "secondary", children: title }), subtitle ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subtitle })) : null] }), addons ? jsx("div", { className: "flex gap-2", children: addons }) : null] }), jsx(Spacer, { size: "small" })] }));
@@ -3469,9 +3483,9 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * - **_The sidebar is just a wrapper. You are responsible for styling the children._**
  *
  * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
- 
+ *
  * @param {SidebarProps} props - The props for the Sidebar component
- * @returns {JSX.Element} Sidebar component
+ * @returns {ReactElement} Sidebar component
  */
 const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
@@ -3615,7 +3629,7 @@ const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
  *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
  *
  * @param {ToggleGroupProps} props - The props for the ToggleGroup component
- * @returns {JSX.Element} ToggleGroup component
+ * @returns {ReactElement} ToggleGroup component
  */
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     return (jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
@@ -3725,7 +3739,7 @@ const getFillColor = (score, levelColors) => {
  * @param {number} min - min range value
  * @param {number} max - max range value
  * @param {LevelColors} levelColors - level colors used to coloring the bar
- * @returns {JSX.Element} ValueBar component
+ * @returns {ReactElement} ValueBar component
  */
 const getValueBarColorByValue = (value, min, max, levelColors) => {
     const score = getScore(value, min, max);
@@ -3736,7 +3750,7 @@ const getValueBarColorByValue = (value, min, max, levelColors) => {
  * ValueBar component is used to display value on a colorful bar within provided range.
  
  * @param {ValueBarProps} props - The props for the ValueBar component
- * @returns {JSX.Element} ValueBar component
+ * @returns {ReactElement} ValueBar component
  */
 const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors, valueColor, showValue, className, dataTestId, zeroScoreAllowed, }) => {
     const score = getScore(value, min, max, zeroScoreAllowed);
@@ -3768,7 +3782,7 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
  * @property {number} [rowHeight="40"] - The estimated height of each row in the list.
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
- * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {(index: number) =>ReactElement} children - A function that takes an index and returns the JSX element to be rendered at said index.
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
@@ -3835,7 +3849,7 @@ const cvaWidgetBodyDensityContainer = cvaMerge([
  * @summary For applying padding and gap to a Widget.
  * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
  * @param {WidgetBodyProps} props - The props for the WidgetBody component
- * @returns {JSX.Element} WidgetBody component
+ * @returns {ReactElement} WidgetBody component
  */
 const WidgetBody = ({ density = "auto", children, dataTestId, className, disableGap }) => {
     return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.23",
+  "version": "1.4.28",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,22 +8,22 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "usehooks-ts": "^3.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "react-helmet-async": "^1.3.0",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
-    "@testing-library/react": "15.0.6",
+    "@testing-library/react": "16.2.0",
     "@floating-ui/react": "^0.26.25",
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.23",
-    "@trackunit/css-class-variance-utilities": "1.3.23",
-    "@trackunit/shared-utils": "1.5.23",
-    "@trackunit/ui-icons": "1.3.23",
-    "@trackunit/react-table-pagination": "1.3.23"
+    "@trackunit/ui-design-tokens": "1.3.28",
+    "@trackunit/css-class-variance-utilities": "1.3.28",
+    "@trackunit/shared-utils": "1.5.28",
+    "@trackunit/ui-icons": "1.3.28",
+    "@trackunit/react-table-pagination": "1.3.28"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Alert/Alert.d.ts

@@ -42,8 +42,8 @@ export interface AlertProps extends CommonProps {
 }
 /**
  * The Alert component should be used to inform the user of important information.
- 
+ *
  * @param {AlertProps} props - The props for the Alert component
- * @returns {JSX.Element} Alert component
+ * @returns {ReactElement} Alert component
  */
 export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Badge/Badge.d.ts

@@ -31,7 +31,7 @@ export type BadgeProps = BaseBadgeProps;
  * The Badge component is used to display a notification badge with an optional number value.
  
  * @param {BadgeProps} props - The props for the Badge component
- * @returns {JSX.Element} Badge component
+ * @returns {ReactElement} Badge component
  */
 export declare const Badge: ({ color, className, count, max, hideZero, dataTestId }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -10,7 +10,7 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * Avoid using breadcrumbs to indicate forthcoming steps. For processes with sequential steps, use a wizard flow instead.
  *
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
- * @returns {JSX.Element} Breadcrumb component
+ * @returns {ReactElement} Breadcrumb component
  */
 export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 /**

package/src/components/Card/Card.d.ts

@@ -26,8 +26,8 @@ export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivEleme
 /**
  * The Card component is a container for UI elements, and is the main component of the modal.
  * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
- 
+ *
  * @param {CardProps} props - The props for the Card component
- * @returns {JSX.Element} Card component
+ * @returns {ReactElement} Card component
  */
 export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Card/CardBody.d.ts

@@ -28,6 +28,6 @@ export interface CardBodyProps extends CommonProps {
  * @summary For applying padding and gap to a Card.
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
  * @param {CardBodyProps} props - The props for the CardBody component
- * @returns {JSX.Element} CardBody component
+ * @returns {ReactElement} CardBody component
  */
 export declare const CardBody: ({ density, children, dataTestId, className, direction, disableGap, id, }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;