@tangle-network/ui 11.38.2 → 11.39.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/dist/primitives/tooltip.d.ts

@@ -14,6 +14,9 @@ declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.T
  * 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";
@@ -34,18 +35,21 @@ 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.2",
+  "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";
@@ -48,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}
@@ -61,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 };