@trackunit/react-components 1.16.7-alpha-1695329519c.0 → 1.16.7

package/index.cjs.js

@@ -277,7 +277,7 @@ const TAG_TEXT_MIN_WIDTH_PX = sharedUtils.parseTailwindArbitraryValue(TAG_TEXT_M
  *   <Tag
  *     color="primary"
  *     icon={<Icon name="Funnel" size="small" />}
- *     onClose={onRemove}
+ *     onClickClose={onRemove}
  *   >
  *     {label}
  *   </Tag>
@@ -286,7 +286,7 @@ const TAG_TEXT_MIN_WIDTH_PX = sharedUtils.parseTailwindArbitraryValue(TAG_TEXT_M
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
+const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
     const textRef = react.useRef(null);
     const [shouldTruncate, setShouldTruncate] = react.useState(false);
     react.useLayoutEffect(() => {
@@ -307,23 +307,23 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
         return false;
     }, [color]);
     const layout = react.useMemo(() => {
-        if (onClose !== undefined && isSupportedDismissColor && !disabled) {
+        if (onClickClose !== undefined && isSupportedDismissColor && !disabled) {
             return "containsDismiss";
         }
         if (icon !== null && icon !== undefined) {
             return "containsIcon";
         }
         return "default";
-    }, [onClose, isSupportedDismissColor, disabled, icon]);
+    }, [onClickClose, isSupportedDismissColor, disabled, icon]);
     return (jsxRuntime.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" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsxRuntime.jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
 /**
@@ -1054,7 +1054,7 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["shrink-0", "g
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, }) => {
     const ref = react.useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     react.useEffect(() => {
@@ -1069,13 +1069,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({
                             inline: !isTextWrapping && (children === null || children === undefined),
                             actionsInline,
-                        }), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { "data-testid": `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose !== undefined && !actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({
+                        }), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { "data-testid": `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClickClose !== undefined && !actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({
                             inline: !isTextWrapping && (children === null || children === undefined),
                             actionsInline,
-                        }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction !== undefined || secondaryAction !== undefined ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction !== undefined ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction !== undefined ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose !== undefined && actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({
+                        }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction !== undefined || secondaryAction !== undefined ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction !== undefined ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction !== undefined ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClickClose !== undefined && actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({
                     inline: !isTextWrapping && (children === null || children === undefined),
                     actionsInline,
-                }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
+                }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {
@@ -1389,9 +1389,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, back, }) => {
+const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxRuntime.jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: back, size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
 };
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
@@ -1647,12 +1647,12 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
     return (jsxRuntime.jsx("div", { className: cvaCardHeaderContainer({
             border: hideSeparator ? "borderless" : "default",
             padding,
             className,
-        }), "data-card-header": true, "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-card-header": true, "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClickClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([
@@ -6622,8 +6622,8 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                 }, ...moreMenuProps, className: moreMenuProps?.className, "data-testid": `${dataTestId}-more-menu`, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, "data-testid": dataTestId, children: react.Children.map(children, child => {
                         return itemOverflowMap[child.props.id] === true
                             ? react.cloneElement(child, {
-                                onClick: () => {
-                                    child.props.onClick?.();
+                                onClick: e => {
+                                    child.props.onClick?.(e);
                                     close();
                                 },
                                 className: "w-full",

package/index.esm.js

@@ -275,7 +275,7 @@ const TAG_TEXT_MIN_WIDTH_PX = parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLA
  *   <Tag
  *     color="primary"
  *     icon={<Icon name="Funnel" size="small" />}
- *     onClose={onRemove}
+ *     onClickClose={onRemove}
  *   >
  *     {label}
  *   </Tag>
@@ -284,7 +284,7 @@ const TAG_TEXT_MIN_WIDTH_PX = parseTailwindArbitraryValue(TAG_TEXT_MIN_WIDTH_CLA
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
+const Tag = ({ className, "data-testid": dataTestId, children, size = "medium", onClickClose, color = "info", disabled = false, ref, icon, onMouseEnter, }) => {
     const textRef = useRef(null);
     const [shouldTruncate, setShouldTruncate] = useState(false);
     useLayoutEffect(() => {
@@ -305,23 +305,23 @@ const Tag = ({ className, "data-testid": dataTestId, children, size = "medium",
         return false;
     }, [color]);
     const layout = useMemo(() => {
-        if (onClose !== undefined && isSupportedDismissColor && !disabled) {
+        if (onClickClose !== undefined && isSupportedDismissColor && !disabled) {
             return "containsDismiss";
         }
         if (icon !== null && icon !== undefined) {
             return "containsIcon";
         }
         return "default";
-    }, [onClose, isSupportedDismissColor, disabled, icon]);
+    }, [onClickClose, 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(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+        }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon !== null && icon !== undefined && size === "medium" ? (jsx("div", { className: cvaTagIconContainer(), "data-slot": "icon", children: icon })) : null, jsx("span", { className: cvaTagText({ truncate: shouldTruncate }), ref: textRef, children: children }), Boolean(onClickClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onMouseDown: onClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
+            jsx("div", { className: cvaTagIconContainer(), "data-slot": "dismiss", onClick: onClickClose, children: jsx(Icon, { className: cvaTagIcon(), "data-testid": dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };
 
 /**
@@ -1052,7 +1052,7 @@ const cvaAlertIconContainer = cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll = false, actionsInline = false, }) => {
     const ref = useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     useEffect(() => {
@@ -1067,13 +1067,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 }), children: [jsx("div", { className: cvaAlertIconContainer({
                             inline: !isTextWrapping && (children === null || children === undefined),
                             actionsInline,
-                        }), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { "data-testid": `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose !== undefined && !actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
+                        }), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { "data-testid": `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children !== null && children !== undefined ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClickClose !== undefined && !actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
                             inline: !isTextWrapping && (children === null || children === undefined),
                             actionsInline,
-                        }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction !== undefined || secondaryAction !== undefined ? (jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction !== undefined ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction !== undefined ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose !== undefined && actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
+                        }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction !== undefined || secondaryAction !== undefined ? (jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction !== undefined ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction !== undefined ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClickClose !== undefined && actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({
                     inline: !isTextWrapping && (children === null || children === undefined),
                     actionsInline,
-                }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
+                }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {
@@ -1387,9 +1387,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, back, }) => {
+const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, }) => {
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: back, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
+    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
 };
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
@@ -1645,12 +1645,12 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
     return (jsx("div", { className: cvaCardHeaderContainer({
             border: hideSeparator ? "borderless" : "default",
             padding,
             className,
-        }), "data-card-header": true, "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-card-header": true, "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClickClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClickClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaClickable = cvaMerge([
@@ -6620,8 +6620,8 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                 }, ...moreMenuProps, className: moreMenuProps?.className, "data-testid": `${dataTestId}-more-menu`, children: close => (jsx(MenuList, { ...menuListProps, "data-testid": dataTestId, children: Children.map(children, child => {
                         return itemOverflowMap[child.props.id] === true
                             ? cloneElement(child, {
-                                onClick: () => {
-                                    child.props.onClick?.();
+                                onClick: e => {
+                                    child.props.onClick?.(e);
                                     close();
                                 },
                                 className: "w-full",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.16.7-alpha-1695329519c.0",
+  "version": "1.16.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.26-alpha-1695329519c.0",
-    "@trackunit/css-class-variance-utilities": "1.11.26-alpha-1695329519c.0",
-    "@trackunit/shared-utils": "1.13.26-alpha-1695329519c.0",
-    "@trackunit/ui-icons": "1.11.25-alpha-1695329519c.0",
+    "@trackunit/ui-design-tokens": "1.11.26",
+    "@trackunit/css-class-variance-utilities": "1.11.26",
+    "@trackunit/shared-utils": "1.13.26",
+    "@trackunit/ui-icons": "1.11.25",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

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

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type AlertColors = "info" | "success" | "warning" | "danger" | "neutral";
 export type AlertActionType = "primary" | "secondary";
 export type AlertAction = {
     label: string;
-    onClick: () => void;
+    onClick: MouseEventHandler<HTMLButtonElement>;
     loading?: boolean;
 };
 export interface AlertProps extends CommonProps {
@@ -30,9 +30,9 @@ export interface AlertProps extends CommonProps {
      */
     secondaryAction?: AlertAction;
     /**
-     * OnClose Event.
+     * OnClickClose Event - handler for the close button click.
      */
-    onClose?: () => void;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * A prop to enable autoscroll to alert element
      *
@@ -108,4 +108,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, "data-testid": dataTestId, autoScroll, actionsInline, }: AlertProps) => ReactElement;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll, actionsInline, }: AlertProps) => ReactElement;

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

@@ -33,7 +33,7 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, back, }: BreadcrumbProps) => ReactElement;
+export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, }: BreadcrumbProps) => ReactElement;
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
  *

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

@@ -1,12 +1,12 @@
+import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
-import { ReactElement } from "react";
 export interface BreadcrumbItemProps {
     label: string;
     to: string;
 }
 export interface BreadcrumbProps extends CommonProps {
     breadcrumbItems: Array<BreadcrumbItemProps>;
-    back: () => void;
+    onClickBack: MouseEventHandler<HTMLButtonElement>;
 }
 export interface BreadcrumbContainerProps extends CommonProps {
     breadcrumbItems: Array<ReactElement<BreadcrumbItemProps>>;

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

@@ -27,7 +27,7 @@ export interface CardHeaderProps extends CommonProps {
      * @deprecated Use `actions` to render a custom close button and handle its `onClick` instead.
      * Function to call when the close button is clicked.
      */
-    onClose?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Children to render in the header.
      */
@@ -47,4 +47,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, }: CardHeaderProps) => ReactElement;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, }: CardHeaderProps) => ReactElement;

package/src/components/EmptyState/EmptyState.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 type EmptyStateImage = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
 type EmptyStateButtonAction = {
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     title: string;
     to?: {
         pathname: string;

package/src/components/HorizontalOverflowScroller/OverflowIndicator.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement } from "react";
+import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 type OverflowDirection = "left" | "right";
 export interface OverflowIndicatorProps extends CommonProps {
@@ -9,7 +9,7 @@ export interface OverflowIndicatorProps extends CommonProps {
     /**
      * Callback function to handle scroll action
      */
-    onClickScroll?: (event: MouseEvent<HTMLElement>) => void;
+    onClickScroll?: MouseEventHandler<HTMLButtonElement>;
 }
 /**
  * Overflow indicator component that shows visual cues when content extends beyond visible area

package/src/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties, MouseEvent, ReactElement, RefObject } from "react";
+import { CSSProperties, MouseEventHandler, ReactElement, RefObject } from "react";
 import { AriaProps } from "../../common/AriaProps";
 import { CommonProps } from "../../common/CommonProps";
 import { Size } from "../../common/Size";
@@ -278,7 +278,7 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      * The type value depends on the size prop, the small and medium size are always solid, the large size is either solid or outline.
      */
     type?: "solid" | "outline" | "mini";
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
      * Ref forwarded to the span element
      *

package/src/components/KPICard/KPICard.d.ts

@@ -1,6 +1,6 @@
 import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
-import { ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { IconColors } from "../Icon/Icon";
 import { KPIProps } from "../KPI/KPI";
 import { NoticeProps } from "../Notice/Notice";
@@ -14,7 +14,7 @@ export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
     /**
      * On kpi card click handler
      */
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * Children to be rendered
      */

package/src/components/List/useList.d.ts

@@ -1,5 +1,5 @@
 import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
-import { ReactElement, RefObject } from "react";
+import { MouseEventHandler, ReactElement, RefObject } from "react";
 import { RelayPagination } from "../../hooks/useRelayPagination";
 import { ListLoadingIndicatorProps } from "./ListLoadingIndicator";
 declare const DEFAULT_LOADING_INDICATOR_CONFIG: Extract<ListLoadingIndicatorProps, {
@@ -17,7 +17,7 @@ export interface VirtualizationListItemProps {
     /** Element ref for virtualization measurement and setting positioning transform styles */
     ref: (node: HTMLLIElement | null) => void;
     /** Click handler for row-level interactions */
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLLIElement>;
     /** Data attribute for accessibility and debugging */
     "data-index": number;
     /** Tab index for keyboard navigation */
@@ -136,7 +136,7 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
     /** Helper to create list item props for a given row */
     readonly getListItemProps: (row: ListRow<TItem>, options: {
         className: string;
-        onClick?: () => void;
+        onClick?: MouseEventHandler<HTMLLIElement>;
     }) => VirtualizationListItemProps;
     /** Header element (if provided) */
     readonly header?: ReactElement;

package/src/components/ListItem/ListItem.d.ts

@@ -25,7 +25,7 @@ export interface ListItemProps extends CommonProps, ListItemVirtualizationProps,
     /**Optional thumbnail for the ListItem. Can be used to display an image or icon. */
     thumbnail?: ReactElement;
     /**Makes the items interactive. Can be used to navigate to a different page when an item is clicked. */
-    onClick?: MouseEventHandler<HTMLElement>;
+    onClick?: MouseEventHandler<HTMLLIElement>;
     /**Details can be used to nest a component on the right side of the ListItem (can be used to display a tag, icon, highlight, text, etc.)   */
     details?: ReactNode;
     /**If an icon is chosen as thumbnail, use this to set the color of the icon. */

package/src/components/Menu/MenuList/MenuList.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 export interface MenuListProps extends CommonProps {
     /**
@@ -6,7 +6,7 @@ export interface MenuListProps extends CommonProps {
      */
     children: ReactNode;
     /** Click handler - typically used to trigger close action. when propagation is NOT prevented on menuItem */
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * Enable multi-selection in the menu list.
      *

package/src/components/Sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactElement } from "react";
+import { ComponentProps, MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { MenuList } from "../Menu/MenuList/MenuList";
 import { MoreMenu } from "../Menu/MoreMenu/MoreMenu";
@@ -9,7 +9,7 @@ export interface SidebarItemProps extends CommonProps {
      */
     id: string;
     /** Optional onClick */
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLElement>;
 }
 export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 export interface SidebarProps extends CommonProps {

package/src/components/Tag/Tag.d.ts

@@ -16,7 +16,7 @@ export interface TagProps extends CommonProps {
      * Available only for neutral, primary and white tags.
      *
      */
-    onClose?: MouseEventHandler<HTMLDivElement>;
+    onClickClose?: MouseEventHandler<HTMLDivElement>;
     /**
      * Child nodes of the tag.
      *
@@ -76,7 +76,7 @@ export interface TagProps extends CommonProps {
  *   <Tag
  *     color="primary"
  *     icon={<Icon name="Funnel" size="small" />}
- *     onClose={onRemove}
+ *     onClickClose={onRemove}
  *   >
  *     {label}
  *   </Tag>
@@ -85,4 +85,4 @@ export interface TagProps extends CommonProps {
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClose, color, disabled, ref, icon, onMouseEnter, }: TagProps) => ReactElement;
+export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, }: TagProps) => ReactElement;

package/src/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
-import { Dispatch, MouseEvent, ReactElement, SetStateAction } from "react";
+import { Dispatch, MouseEventHandler, ReactElement, SetStateAction } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
@@ -73,7 +73,7 @@ export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGrou
         content?: string;
         placement?: TooltipPlacement;
     };
-    onClick: (event?: MouseEvent<HTMLElement>) => void;
+    onClick: MouseEventHandler<HTMLButtonElement>;
     selected: boolean;
     disabled: boolean;
     size: "small" | "medium" | "large";

package/src/components/buttons/Button/Button.d.ts

@@ -1,7 +1,8 @@
+import { MappedOmit } from "@trackunit/shared-utils";
 import { ReactElement, ReactNode, Ref } from "react";
 import { Size } from "../../../common/Size";
 import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
-export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
+export interface ButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
      */

package/src/components/buttons/StarButton/StarButton.d.ts

@@ -1,7 +1,7 @@
-import { MouseEvent, ReactElement } from "react";
+import { MouseEventHandler, ReactElement } from "react";
 interface StarButtonProps {
     starred: boolean;
-    onClick: (e: MouseEvent) => void;
+    onClick: MouseEventHandler<HTMLDivElement>;
 }
 /**
  * The StarButton component is used for favorite actions or similar.