@tangle-network/ui 11.38.1 → 11.39.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 11.39.0
+
+### Minor Changes
+
+- f10bf8a: Support TooltipContent portal={false} for content that belongs to its local container. Keep the default portal, shared Content/SurfaceMotion owner, positioning, forwarded refs, asChild and Root state APIs.
+  
+  Preserve the caller as the asChild slot target when Radix adds accessibility content.
+
+## 11.38.2
+
+### Patch Changes
+
+- b33914e: Keep accepted Tooltip reopens open while exit content is retained. Preserve controlled/defaultOpen APIs, native disabled-trigger descriptions and sibling-tooltip dismissal through the shared Root owner.
+
 ## 11.38.1
 
 ### Patch Changes

package/dist/primitives/tooltip.d.ts

@@ -5,12 +5,18 @@ declare function TooltipProvider({ delayDuration, skipDelayDuration, ...props }:
 declare namespace TooltipProvider {
   var displayName: string;
 }
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare function Tooltip({ open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare namespace Tooltip {
+  var displayName: string;
+}
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Inverse-surface label for a control whose name is otherwise only an icon.
  * It is supplementary: the trigger still needs its own accessible name.
  */
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  /** Render through a portal; use false to keep content in its local owner. */
+  portal?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives/tooltip.js

@@ -2,6 +2,7 @@
 import { surfaceMotion } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
 import { SurfaceMotion } from "../lib/surface-motion.js";
+import { Slottable } from "@radix-ui/react-slot";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -17,24 +18,38 @@ const TooltipProvider = ({ delayDuration = 400, skipDelayDuration = 300, ...prop
 	...props
 });
 TooltipProvider.displayName = "TooltipProvider";
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = ({ open, defaultOpen = false, onOpenChange, ...props }) => {
+	const [localOpen, setLocalOpen] = React.useState(defaultOpen);
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+		...props,
+		open: open ?? localOpen,
+		onOpenChange: (next) => {
+			if (open === void 0) setLocalOpen(next);
+			onOpenChange?.(next);
+		}
+	});
+};
+Tooltip.displayName = "Tooltip";
 const TooltipTrigger = TooltipPrimitive.Trigger;
 /**
 * Inverse-surface label for a control whose name is otherwise only an icon.
 * It is supplementary: the trigger still needs its own accessible name.
 */
-const TooltipContent = React.forwardRef(({ className, sideOffset = 6, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
-	ref,
-	sideOffset,
-	className: cn("z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md", surfaceMotion, className),
-	...props,
-	asChild: true,
-	children: /* @__PURE__ */ jsx(SurfaceMotion, {
-		kind: "tooltip",
-		asChild,
-		children
-	})
-}) }));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 6, asChild, children, portal = true, ...props }, ref) => {
+	const content = /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+		ref,
+		sideOffset,
+		className: cn("z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md", surfaceMotion, className),
+		...props,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(SurfaceMotion, {
+			kind: "tooltip",
+			asChild,
+			children: asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children
+		})
+	});
+	return portal ? /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: content }) : content;
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.38.1",
+  "version": "11.39.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/tooltip.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Slottable } from "@radix-ui/react-slot";
 import * as React from "react";
 import { SurfaceMotion } from "../lib/surface-motion";
 import { surfaceMotion } from "../lib/motion";
@@ -24,7 +25,21 @@ const TooltipProvider = ({
 );
 TooltipProvider.displayName = "TooltipProvider";
 
-const Tooltip = TooltipPrimitive.Root;
+// Keep Radix on its controlled path even for the public uncontrolled API.
+// Its global tooltip.open event then runs before the new open state commits:
+// a retained content listener cannot turn its own accepted reopen into Close.
+const Tooltip = ({ open, defaultOpen = false, onOpenChange, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) => {
+  const [localOpen, setLocalOpen] = React.useState(defaultOpen);
+  return <TooltipPrimitive.Root
+    {...props}
+    open={open ?? localOpen}
+    onOpenChange={(next) => {
+      if (open === undefined) setLocalOpen(next);
+      onOpenChange?.(next);
+    }}
+  />;
+};
+Tooltip.displayName = "Tooltip";
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
@@ -34,9 +49,12 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
  */
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, asChild, children, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    /** Render through a portal; use false to keep content in its local owner. */
+    portal?: boolean;
+  }
+>(({ className, sideOffset = 6, asChild, children, portal = true, ...props }, ref) => {
+  const content = (
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
@@ -47,9 +65,13 @@ const TooltipContent = React.forwardRef<
       )}
       {...props}
       asChild
-    ><SurfaceMotion kind="tooltip" asChild={asChild}>{children}</SurfaceMotion></TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-));
+    ><SurfaceMotion kind="tooltip" asChild={asChild}>
+      {/* Keep the caller as the slot target when Radix adds accessibility children. */}
+      {asChild ? <Slottable>{children}</Slottable> : children}
+    </SurfaceMotion></TooltipPrimitive.Content>
+  );
+  return portal ? <TooltipPrimitive.Portal>{content}</TooltipPrimitive.Portal> : content;
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };