@trackunit/react-components 1.17.37 → 1.17.39

package/index.cjs.js

@@ -4488,17 +4488,18 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
 const PopoverTrigger = function PopoverTrigger({ children, renderButton = false, ref: propRef, ...props }) {
     const context = usePopoverContext();
     const ref = react$1.useMergeRefs([context.refs.setReference, propRef]);
+    const dataState = context.isOpen === true ? "open" : "closed";
     if (!renderButton && react.isValidElement(children)) {
         const referenceProps = context.getReferenceProps({
             ...props,
             ...children.props,
-            "data-state": context.isOpen === true ? "open" : "closed",
+            "data-state": dataState,
         });
         const cloneProps = { ...referenceProps };
         cloneProps.ref = ref;
         return react.cloneElement(children, cloneProps);
     }
-    return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
+    return (jsxRuntime.jsx(Button, { "data-state": dataState, ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
@@ -4601,7 +4602,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, ref, ...rest }) => {
     const [isOpen, setIsOpen] = react.useState(false);
     const arrowRef = react.useRef(null);
     const { refs, floatingStyles, context } = react$1.useFloating({
@@ -4619,12 +4620,13 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
         whileElementsMounted: react$1.autoUpdate,
     });
     const { isMounted } = react$1.useTransitionStatus(context);
+    const mergedRef = react$1.useMergeRefs([refs.setReference, ref]);
     // Please don't move this into the component body directly without testing it first
     // I tried and it caused infinite re-renders some places
     const wrappedChildren = react.useMemo(() => {
         return jsxRuntime.jsx(reactSlot.Slot, { children: children });
     }, [children]);
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: { delayed, interactable } }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsxRuntime.jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": 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 ? `${dataTestId}-content` : undefined, children: [jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { click: false, hover: { delayed, interactable } }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { ...rest, "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: mergedRef, style: style, children: children === undefined ? (jsxRuntime.jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": 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 ? `${dataTestId}-content` : undefined, children: [jsxRuntime.jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["inline-flex", "items-center"]);

package/index.esm.js

@@ -4486,17 +4486,18 @@ const PopoverContent = function PopoverContent({ className, "data-testid": dataT
 const PopoverTrigger = function PopoverTrigger({ children, renderButton = false, ref: propRef, ...props }) {
     const context = usePopoverContext();
     const ref = useMergeRefs$1([context.refs.setReference, propRef]);
+    const dataState = context.isOpen === true ? "open" : "closed";
     if (!renderButton && isValidElement(children)) {
         const referenceProps = context.getReferenceProps({
             ...props,
             ...children.props,
-            "data-state": context.isOpen === true ? "open" : "closed",
+            "data-state": dataState,
         });
         const cloneProps = { ...referenceProps };
         cloneProps.ref = ref;
         return cloneElement(children, cloneProps);
     }
-    return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
+    return (jsx(Button, { "data-state": dataState, ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
 };
 
 const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
@@ -4599,7 +4600,7 @@ const FloatingArrowContainer = ({ arrowRef, mode = "dark", }) => {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, ref, ...rest }) => {
     const [isOpen, setIsOpen] = useState(false);
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
@@ -4617,12 +4618,13 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);
+    const mergedRef = useMergeRefs$1([refs.setReference, ref]);
     // Please don't move this into the component body directly without testing it first
     // I tried and it caused infinite re-renders some places
     const wrappedChildren = useMemo(() => {
         return jsx(Slot, { children: children });
     }, [children]);
-    return (jsxs(Popover, { activation: { hover: { delayed, interactable } }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: refs.setReference, style: style, children: children === undefined ? (jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": 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 ? `${dataTestId}-content` : undefined, children: [jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { click: false, hover: { delayed, interactable } }, className: cvaTooltipPopover(), "data-testid": dataTestId, id: id, onOpenStateChange: setIsOpen, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { ...rest, "data-testid": dataTestId ? `${dataTestId}-trigger` : null, ref: mergedRef, style: style, children: children === undefined ? (jsx(Icon, { className: cvaTooltipIcon({ color: mode }), "data-testid": 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 ? `${dataTestId}-content` : undefined, children: [jsx(Text, { "data-testid": dataTestId ? `${dataTestId}-text` : undefined, inverted: mode === "dark", size: "small", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["inline-flex", "items-center"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.37",
+  "version": "1.17.39",
   "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.51",
-    "@trackunit/css-class-variance-utilities": "1.11.51",
-    "@trackunit/shared-utils": "1.13.51",
-    "@trackunit/ui-icons": "1.11.50",
+    "@trackunit/ui-design-tokens": "1.11.52",
+    "@trackunit/css-class-variance-utilities": "1.11.53",
+    "@trackunit/shared-utils": "1.13.53",
+    "@trackunit/ui-icons": "1.11.51",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/Popover/PopoverTrigger.d.ts

@@ -1,5 +1,6 @@
-import { HTMLProps, ReactElement, ReactNode, Ref } from "react";
-interface PopoverTriggerProps extends HTMLProps<HTMLElement> {
+import { HTMLProps, ReactElement, ReactNode } from "react";
+import { Refable } from "../../common/Refable";
+interface PopoverTriggerProps extends HTMLProps<HTMLElement>, Refable {
     /**
      * The element that acts as the trigger. Typically a Button or IconButton.
      * When `renderButton` is false (default), the child element is cloned with popover props.
@@ -11,10 +12,6 @@ interface PopoverTriggerProps extends HTMLProps<HTMLElement> {
      * your own Button or interactive element as children.
      */
     renderButton?: boolean;
-    /**
-     * A ref for the component.
-     */
-    ref?: Ref<HTMLElement>;
 }
 /**
  * PopoverTrigger is the clickable element that opens or closes a Popover.

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

@@ -1,11 +1,12 @@
 import { Placement } from "@floating-ui/react";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Styleable } from "../../common/Styleable";
 import { IconProps } from "../Icon/Icon";
 import { PopoverHoverOptions } from "../Popover/PopoverTypes";
 export type TooltipPlacement = Placement | "auto";
-export interface TooltipProps extends Omit<CommonProps, "className">, Styleable {
+export interface TooltipProps extends Omit<CommonProps, "className">, Styleable, Refable {
     /**
      * The text to be displayed in the tooltip.
      */
@@ -89,4 +90,4 @@ export interface TooltipProps extends Omit<CommonProps, "className">, Styleable
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */
-export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, delayed, interactable, }: TooltipProps) => ReactElement;
+export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, delayed, interactable, ref, ...rest }: TooltipProps) => ReactElement;