@trackunit/react-components 2.1.57 → 2.1.59

package/index.cjs.js

@@ -607,10 +607,10 @@ const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, initialFocus, ref: propRef, ...props }) {
+const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, initialFocus, returnFocus = true, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
+    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: returnFocus, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -1310,7 +1310,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, { 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) }), 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] }));
 };
 
 /**

package/index.esm.js

@@ -605,10 +605,10 @@ const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, initialFocus, ref: propRef, ...props }) {
+const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, initialFocus, returnFocus = true, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs$1([context.refs.setFloating, propRef]);
-    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
+    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: returnFocus, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -1308,7 +1308,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, { 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) }), 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] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.1.57",
+  "version": "2.1.59",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,17 +14,17 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.13.54",
-    "@trackunit/css-class-variance-utilities": "1.13.55",
-    "@trackunit/shared-utils": "1.15.56",
-    "@trackunit/ui-icons": "1.13.56",
+    "@trackunit/ui-design-tokens": "1.13.55",
+    "@trackunit/css-class-variance-utilities": "1.13.56",
+    "@trackunit/shared-utils": "1.15.57",
+    "@trackunit/ui-icons": "1.13.57",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "superjson": "^2.2.6",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.0.57"
+    "@trackunit/i18n-library-translation": "2.0.58"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -43,6 +43,19 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
      * dialog-like menus or pickers) instead of leaving focus on the trigger.
      */
     initialFocus?: number | MutableRefObject<HTMLElement | null>;
+    /**
+     * Controls whether focus is returned to the previously focused element when the popover closes.
+     *
+     * Floating UI tracks the most recently focused tabbable element **across the whole app** (not
+     * just this popover instance) as the return target, so disabling this is the only reliable way
+     * to guarantee a popover never affects focus on close.
+     *
+     * Set to `false` for non-modal, non-interactive overlays (like `Tooltip`) that should never
+     * manage focus in either direction.
+     *
+     * @default true
+     */
+    returnFocus?: boolean;
     /**
      * A ref for the component
      */
@@ -83,4 +96,4 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-export declare const PopoverContent: ({ className, "data-testid": dataTestId, children, portalId, initialFocus, ref: propRef, ...props }: PopoverContentProps) => ReactElement;
+export declare const PopoverContent: ({ className, "data-testid": dataTestId, children, portalId, initialFocus, returnFocus, ref: propRef, ...props }: PopoverContentProps) => ReactElement;