@trackunit/react-components 0.1.412 → 0.1.414

package/index.cjs.js

@@ -3673,7 +3673,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger({ children, rend
     }
 });
 
-const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3696,11 +3696,11 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
             left: "left-full top-2/4 mt-[-6px]",
-            "left-start": "top-[8%]",
-            "left-end": "bottom-[8%]",
+            "left-start": "top-1/4 top-[8%]",
+            "left-end": "bottom-1/4 bottom-[8%]",
             right: "right-full top-2/4 mt-[-6px] ",
-            "right-start": "top-[8%]",
-            "right-end": "bottom-[8%]",
+            "right-start": "top-1/4 top-[8%]",
+            "right-end": "bottom-1/4 bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3757,10 +3757,13 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: react.autoUpdate,
     });
     const { isMounted } = react.useTransitionStatus(context);
+    // Please don't try to move this into the component body directly
+    // I tried and it caused infinite re-renders some places (for whatever reason)
+    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
     if (disabled) {
-        return children;
+        return wrappedChildren;
     }
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (jsxRuntime.jsx("span", { className: cvaTooltipContainer(), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children })) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);

package/index.esm.js

@@ -3653,7 +3653,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
     }
 });
 
-const cvaTooltipContainer = cvaMerge(["inline-flex"]);
+const cvaTooltipFlexContainer = cvaMerge(["inline-flex"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3676,11 +3676,11 @@ const cvaTooltipPopoverTail = cvaMerge("", {
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
             left: "left-full top-2/4 mt-[-6px]",
-            "left-start": "top-[8%]",
-            "left-end": "bottom-[8%]",
+            "left-start": "top-1/4 top-[8%]",
+            "left-end": "bottom-1/4 bottom-[8%]",
             right: "right-full top-2/4 mt-[-6px] ",
-            "right-start": "top-[8%]",
-            "right-end": "bottom-[8%]",
+            "right-start": "top-1/4 top-[8%]",
+            "right-end": "bottom-1/4 bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3737,10 +3737,13 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);
+    // Please don't try to move this into the component body directly
+    // I tried and it caused infinite re-renders some places (for whatever reason)
+    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
     if (disabled) {
-        return children;
+        return wrappedChildren;
     }
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (jsx("span", { className: cvaTooltipContainer(), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children })) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);

package/package.json

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

package/src/components/Tooltip/Tooltip.d.ts

@@ -42,4 +42,4 @@ export interface TooltipProps extends CommonProps {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => React.ReactNode;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Tooltip/Tooltip.variants.d.ts

@@ -1,4 +1,4 @@
-export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTooltipIcon: (props?: ({
     color?: "light" | "dark" | null | undefined;
     defaultVariants?: "color" | null | undefined;