@trackunit/react-components 1.5.22 → 1.5.23

package/index.cjs.js

@@ -252,7 +252,7 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, }) => {
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, onMouseEnter, }) => {
     const isSupportedDismissColor = react.useMemo(() => {
         if (color === "neutral" || color === "primary" || color === "white") {
             return true;
@@ -268,7 +268,7 @@ const Tag = ({ className, dataTestId, children, size = "medium", onClose, color
         }
         return "default";
     }, [onClose, icon, isSupportedDismissColor]);
-    return (jsxRuntime.jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, ref: ref, children: [icon && size === "medium" ? jsxRuntime.jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsxRuntime.jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+    return (jsxRuntime.jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon && size === "medium" ? jsxRuntime.jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsxRuntime.jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
             // a fix for multiselect deselecting tags working together with fade out animation
             jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { className: cvaTagIcon(), dataTestId: dataTestId + "Icon", name: "XCircle", size: "small", style: { WebkitTransition: "-webkit-transform 0.150s" }, type: "solid" }) })) : null] }));
 };

package/index.esm.js

@@ -250,7 +250,7 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, }) => {
+const Tag = ({ className, dataTestId, children, size = "medium", onClose, color = "primary", disabled = false, ref, icon, onMouseEnter, }) => {
     const isSupportedDismissColor = useMemo(() => {
         if (color === "neutral" || color === "primary" || color === "white") {
             return true;
@@ -266,7 +266,7 @@ const Tag = ({ className, dataTestId, children, size = "medium", onClose, color
         }
         return "default";
     }, [onClose, icon, isSupportedDismissColor]);
-    return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, ref: ref, children: [icon && size === "medium" ? jsx("div", { className: cvaTagIconContainer(), children: icon }) : null, jsx("span", { className: cvaTagText(), children: children }), Boolean(onClose) && isSupportedDismissColor && size === "medium" && !disabled ? (
+    return (jsxs("div", { className: cvaTag({ className, size, color, layout, border: color === "white" ? "default" : "none" }), "data-testid": dataTestId, onMouseEnter: onMouseEnter, ref: ref, children: [icon && 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] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.5.22",
+  "version": "1.5.23",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -37,6 +37,12 @@ export interface TagProps extends CommonProps {
      * The icon to display. Only supported for medium size.
      */
     icon?: ReactNode;
+    /**
+     * A handler for an event triggered when the mouse pointer enters the tag area.
+     * Can be used to apply hover effects or handle other interactions related to a mouse enter event.
+     *
+     */
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
 }
 /**
  * The Tag component is used for labeling or categorizing items in the UI.
@@ -52,6 +58,6 @@ export interface TagProps extends CommonProps {
  * @returns {ReactElement} The rendered Tag component.
  */
 export declare const Tag: {
-    ({ className, dataTestId, children, size, onClose, color, disabled, ref, icon, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, dataTestId, children, size, onClose, color, disabled, ref, icon, onMouseEnter, }: TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };