@trackunit/react-components 4.0.0 → 4.0.3

package/index.cjs.js

@@ -2251,12 +2251,25 @@ 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, ref, ...rest }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, "data-state": dataState, ref, ...rest }) => {
     const [isOpen, setIsOpen] = react.useState(false);
+    // PopoverTrigger marks the element that opened a menu or popover with data-state="open".
+    // That state lands on this tooltip when it is the trigger, or on the child when a parent
+    // such as IconButton forwards it. Keep the tooltip dismissed so it cannot sit on top of the popup.
+    const triggerHasOpenPopup = dataState === "open" ||
+        (react.isValidElement(children) && children.props["data-state"] === "open");
+    const tooltipSuppressed = disabled || triggerHasOpenPopup;
+    // Drop a hover-open in the same render that the trigger's popup opens. A later
+    // effect would commit the tooltip once more and can restore it after the pointer
+    // has already left. Disabled is left alone: a hover that starts while disabled
+    // should still appear once the tooltip is enabled again.
+    if (triggerHasOpenPopup && isOpen) {
+        setIsOpen(false);
+    }
     const arrowRef = react.useRef(null);
     const { refs, floatingStyles, context } = react$1.useFloating({
         placement: placement === "auto" ? "bottom" : placement,
-        open: disabled ? false : isOpen,
+        open: tooltipSuppressed ? false : isOpen,
         onOpenChange: setIsOpen,
         middleware: [
             react$1.offset(8),
@@ -2275,7 +2288,7 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
     const wrappedChildren = react.useMemo(() => {
         return jsxRuntime.jsx(reactSlot.Slot, { children: children });
     }, [children]);
-    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, { initialFocus: -1, returnFocus: false, children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, onClick: e => e.stopPropagation(), onDoubleClick: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), onPointerDown: e => e.stopPropagation(), 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) }), tooltipSuppressed || !isMounted ? null : (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { initialFocus: -1, returnFocus: false, children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, onClick: e => e.stopPropagation(), onDoubleClick: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), onPointerDown: e => e.stopPropagation(), 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 })] }) }) }))] }));
 };
 
 /**

package/index.esm.js

@@ -2250,12 +2250,25 @@ 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, ref, ...rest }) => {
+const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label, placement = "auto", mode = "dark", iconProps, id, style, delayed = false, interactable = true, "data-state": dataState, ref, ...rest }) => {
     const [isOpen, setIsOpen] = useState(false);
+    // PopoverTrigger marks the element that opened a menu or popover with data-state="open".
+    // That state lands on this tooltip when it is the trigger, or on the child when a parent
+    // such as IconButton forwards it. Keep the tooltip dismissed so it cannot sit on top of the popup.
+    const triggerHasOpenPopup = dataState === "open" ||
+        (isValidElement(children) && children.props["data-state"] === "open");
+    const tooltipSuppressed = disabled || triggerHasOpenPopup;
+    // Drop a hover-open in the same render that the trigger's popup opens. A later
+    // effect would commit the tooltip once more and can restore it after the pointer
+    // has already left. Disabled is left alone: a hover that starts while disabled
+    // should still appear once the tooltip is enabled again.
+    if (triggerHasOpenPopup && isOpen) {
+        setIsOpen(false);
+    }
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
         placement: placement === "auto" ? "bottom" : placement,
-        open: disabled ? false : isOpen,
+        open: tooltipSuppressed ? false : isOpen,
         onOpenChange: setIsOpen,
         middleware: [
             offset(8),
@@ -2274,7 +2287,7 @@ const Tooltip = ({ children, "data-testid": dataTestId, disabled = false, label,
     const wrappedChildren = useMemo(() => {
         return jsx(Slot, { children: children });
     }, [children]);
-    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, { initialFocus: -1, returnFocus: false, children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, onClick: e => e.stopPropagation(), onDoubleClick: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), onPointerDown: e => e.stopPropagation(), 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) }), tooltipSuppressed || !isMounted ? null : (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { initialFocus: -1, returnFocus: false, children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, onClick: e => e.stopPropagation(), onDoubleClick: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), onPointerDown: e => e.stopPropagation(), 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 })] }) }) }))] }));
 };
 
 /**

package/migrations/assets/react-router-components/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-router-components",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "2.6.7",
-    "@trackunit/i18n-library-translation": "2.12.6",
-    "@trackunit/react-components": "4.0.0",
-    "@trackunit/react-drawer": "2.14.7",
-    "@trackunit/shared-utils": "1.22.7",
+    "@trackunit/css-class-variance-utilities": "2.6.8",
+    "@trackunit/i18n-library-translation": "2.12.7",
+    "@trackunit/react-components": "4.0.3",
+    "@trackunit/react-drawer": "2.14.11",
+    "@trackunit/shared-utils": "1.22.8",
     "dequal": "^2.0.3",
     "zod": "^3.25.76"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "4.0.0",
+  "version": "4.0.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,15 +14,15 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^3.7.0",
-    "@trackunit/ui-design-tokens": "1.21.7",
-    "@trackunit/css-class-variance-utilities": "2.6.7",
-    "@trackunit/shared-utils": "1.22.7",
-    "@trackunit/ui-icons": "1.20.7",
+    "@trackunit/ui-design-tokens": "1.21.8",
+    "@trackunit/css-class-variance-utilities": "2.6.8",
+    "@trackunit/shared-utils": "1.22.8",
+    "@trackunit/ui-icons": "1.20.8",
     "es-toolkit": "^1.52.0",
     "@tanstack/react-virtual": "^3.14.13",
     "fflate": "^0.8.3",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.12.6"
+    "@trackunit/i18n-library-translation": "2.12.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -48,6 +48,11 @@ export interface TooltipProps extends Omit<CommonProps, "className">, Styleable,
      * @default true
      */
     interactable?: Pick<PopoverHoverOptions, "interactable">["interactable"];
+    /**
+     * Set by `PopoverTrigger` when this tooltip is the element that opens a menu or popover.
+     * While that popup is open the tooltip stays dismissed so the two overlays don't overlap.
+     */
+    "data-state"?: "open" | "closed";
 }
 /**
  * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
@@ -90,4 +95,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, ref, ...rest }: TooltipProps) => ReactElement;
+export declare const Tooltip: ({ children, "data-testid": dataTestId, disabled, label, placement, mode, iconProps, id, style, delayed, interactable, "data-state": dataState, ref, ...rest }: TooltipProps) => ReactElement;