@yahoo/uds 3.99.0 → 3.100.0-beta.1

package/dist/components/client/Tooltip/tooltipContext.js

@@ -0,0 +1,10 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { createContext } from "react";
+
+//#region src/components/client/Tooltip/tooltipContext.tsx
+/** When true, tooltip content should hide when pointer leaves anchor/tooltip. */
+const TooltipInternalContext = createContext(null);
+
+//#endregion
+export { TooltipInternalContext };

package/dist/components/client/Tooltip/useTooltipContent.cjs

@@ -0,0 +1,186 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../../css-tokens/dist/index.cjs');
+const require_components_client_Tooltip_util = require('./util.cjs');
+let react = require("react");
+
+//#region src/components/client/Tooltip/useTooltipContent.ts
+function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef }) {
+	const internalRef = (0, react.useRef)(null);
+	const shadowFilterId = (0, react.useId)();
+	const [dimensions, setDimensions] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	const maxWidthClass = (0, react.useMemo)(() => {
+		if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
+		return "max-w-lg";
+	}, [maxWidth]);
+	(0, react.useEffect)(() => {
+		const el = internalRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => {
+			setDimensions({
+				width: el.offsetWidth,
+				height: el.offsetHeight
+			});
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [open]);
+	const [shadows, setShadows] = (0, react.useState)([]);
+	const shadowValueRef = (0, react.useRef)("");
+	const readShadows = (0, react.useCallback)(() => {
+		if (!internalRef.current) return;
+		const shadowValue = getComputedStyle(internalRef.current).getPropertyValue(`--${require_index.DROP_SHADOW_PREFIX}`);
+		if (shadowValue !== shadowValueRef.current) {
+			shadowValueRef.current = shadowValue;
+			setShadows(require_components_client_Tooltip_util.parseShadow(shadowValue));
+		}
+	}, []);
+	const shadowPadding = (0, react.useMemo)(() => {
+		if (shadows.length === 0) return 0;
+		return shadows.reduce((max, s) => {
+			const extentX = Math.abs(s.x) + s.blur + Math.abs(s.spread);
+			const extentY = Math.abs(s.y) + s.blur + Math.abs(s.spread);
+			return Math.max(max, extentX, extentY);
+		}, 0);
+	}, [shadows]);
+	const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
+	const computeArrowCenter = (0, react.useCallback)(() => {
+		const arrowEl = arrowRef.current;
+		const tooltipEl = internalRef.current;
+		if (!arrowEl || !tooltipEl) return;
+		const arrowRect = arrowEl.getBoundingClientRect();
+		const tooltipRect = tooltipEl.getBoundingClientRect();
+		const side = require_components_client_Tooltip_util.getArrowSide(effectivePlacement);
+		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - tooltipRect.left : arrowRect.top + arrowRect.height / 2 - tooltipRect.top;
+		return Math.round(raw);
+	}, [arrowRef, effectivePlacement]);
+	const onPositionUpdate = (0, react.useCallback)(async ({ updatePosition }) => {
+		await updatePosition();
+		const el = internalRef.current;
+		if (el) {
+			const { offsetWidth, offsetHeight } = el;
+			if (offsetWidth > 0 && offsetHeight > 0) setDimensions((prev) => {
+				if (prev.width === offsetWidth && prev.height === offsetHeight) return prev;
+				return {
+					width: offsetWidth,
+					height: offsetHeight
+				};
+			});
+			readShadows();
+		}
+		const next = computeArrowCenter();
+		if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
+	}, [computeArrowCenter, readShadows]);
+	const svgPath = (0, react.useMemo)(() => {
+		return dimensions.width > 0 && dimensions.height > 0 ? require_components_client_Tooltip_util.generateTooltipPath({
+			width: dimensions.width,
+			height: dimensions.height,
+			placement: effectivePlacement,
+			borderRadius,
+			arrowCenter
+		}) : null;
+	}, [
+		effectivePlacement,
+		dimensions.width,
+		dimensions.height,
+		borderRadius,
+		arrowCenter
+	]);
+	const blurClipPath = (0, react.useMemo)(() => {
+		if (dimensions.width <= 0 || dimensions.height <= 0) return null;
+		const arrowSide = require_components_client_Tooltip_util.getArrowSide(effectivePlacement);
+		const offsetX = arrowSide === "left" ? require_components_client_Tooltip_util.ARROW_HEIGHT : 0;
+		const offsetY = arrowSide === "top" ? require_components_client_Tooltip_util.ARROW_HEIGHT : 0;
+		return require_components_client_Tooltip_util.generateTooltipPath({
+			width: dimensions.width,
+			height: dimensions.height,
+			placement: effectivePlacement,
+			borderRadius,
+			arrowCenter,
+			offsetX,
+			offsetY
+		});
+	}, [
+		effectivePlacement,
+		dimensions.width,
+		dimensions.height,
+		borderRadius,
+		arrowCenter
+	]);
+	const blurStyle = (0, react.useMemo)(() => {
+		const style = { clipPath: blurClipPath ? `path('${blurClipPath}')` : void 0 };
+		switch (require_components_client_Tooltip_util.getArrowSide(effectivePlacement)) {
+			case "top":
+				style.height = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				style.top = "auto";
+				style.bottom = "0";
+				break;
+			case "bottom":
+				style.height = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				break;
+			case "left":
+				style.width = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				style.left = "auto";
+				style.right = "0";
+				break;
+			case "right":
+				style.width = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
+				break;
+		}
+		return style;
+	}, [blurClipPath, effectivePlacement]);
+	const [visible, setVisible] = (0, react.useState)(false);
+	if ((!open || !svgPath) && visible) setVisible(false);
+	(0, react.useEffect)(() => {
+		if (open && svgPath) {
+			const raf = requestAnimationFrame(() => {
+				setVisible(true);
+			});
+			return () => cancelAnimationFrame(raf);
+		}
+	}, [open, svgPath]);
+	return {
+		internalRef,
+		shadowFilterId,
+		maxWidthClass,
+		dimensions,
+		shadows,
+		shadowPadding,
+		svgPath,
+		blurClipPath,
+		blurStyle,
+		visible,
+		childTransitionStyle: {
+			opacity: visible ? 1 : 0,
+			transition: "opacity 200ms ease-in-out"
+		},
+		tooltipShift: (0, react.useMemo)(() => {
+			if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
+				x: 0,
+				y: 0
+			};
+			return require_components_client_Tooltip_util.getArrowClampDelta({
+				width: dimensions.width,
+				height: dimensions.height,
+				placement: effectivePlacement,
+				borderRadius,
+				arrowCenter
+			});
+		}, [
+			arrowCenter,
+			dimensions.width,
+			dimensions.height,
+			effectivePlacement,
+			borderRadius
+		]),
+		onPositionUpdate
+	};
+}
+
+//#endregion
+exports.useTooltipContent = useTooltipContent;

package/dist/components/client/Tooltip/useTooltipContent.d.cts

@@ -0,0 +1,63 @@
+
+import { ParsedShadow } from "./util.cjs";
+import { CSSProperties, RefObject } from "react";
+
+//#region src/components/client/Tooltip/useTooltipContent.d.ts
+interface UseTooltipContentOptions {
+  /** Whether the tooltip is currently open. */
+  open: boolean;
+  /** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
+  effectivePlacement: string;
+  /** Optional max-width override (number = px, string = CSS value). */
+  maxWidth?: number | string;
+  /** Border-radius from the tooltip config (px). */
+  borderRadius: number;
+  /**
+   * Ref to the Ariakit `TooltipArrow` element. Its position (set by
+   * floating-ui) is read inside the `updatePosition` callback so the
+   * SVG arrow always mirrors where floating-ui places the native arrow.
+   */
+  arrowRef: RefObject<HTMLDivElement | null>;
+}
+interface UseTooltipContentReturn {
+  internalRef: RefObject<HTMLElement | null>;
+  shadowFilterId: string;
+  maxWidthClass: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  shadows: ParsedShadow[];
+  shadowPadding: number;
+  svgPath: string | null;
+  blurClipPath: string | null;
+  blurStyle: CSSProperties;
+  visible: boolean;
+  childTransitionStyle: CSSProperties;
+  /**
+   * Pixel offset to apply as a CSS transform on the tooltip element so that
+   * the (clamped) SVG arrow aligns with the trigger center even when the
+   * trigger is too small / close to a rounded corner for the arrow to reach.
+   */
+  tooltipShift: {
+    x: number;
+    y: number;
+  };
+  /**
+   * Pass as the `updatePosition` prop to the Ariakit `<Tooltip>` component.
+   * This hooks into floating-ui's positioning lifecycle so the SVG arrow
+   * center is read after every `computePosition`
+   */
+  onPositionUpdate: (props: {
+    updatePosition: () => Promise<void>;
+  }) => Promise<void>;
+}
+declare function useTooltipContent({
+  open,
+  effectivePlacement,
+  maxWidth,
+  borderRadius,
+  arrowRef
+}: UseTooltipContentOptions): UseTooltipContentReturn;
+//#endregion
+export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };

package/dist/components/client/Tooltip/useTooltipContent.d.ts

@@ -0,0 +1,63 @@
+
+import { ParsedShadow } from "./util.js";
+import { CSSProperties, RefObject } from "react";
+
+//#region src/components/client/Tooltip/useTooltipContent.d.ts
+interface UseTooltipContentOptions {
+  /** Whether the tooltip is currently open. */
+  open: boolean;
+  /** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
+  effectivePlacement: string;
+  /** Optional max-width override (number = px, string = CSS value). */
+  maxWidth?: number | string;
+  /** Border-radius from the tooltip config (px). */
+  borderRadius: number;
+  /**
+   * Ref to the Ariakit `TooltipArrow` element. Its position (set by
+   * floating-ui) is read inside the `updatePosition` callback so the
+   * SVG arrow always mirrors where floating-ui places the native arrow.
+   */
+  arrowRef: RefObject<HTMLDivElement | null>;
+}
+interface UseTooltipContentReturn {
+  internalRef: RefObject<HTMLElement | null>;
+  shadowFilterId: string;
+  maxWidthClass: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  shadows: ParsedShadow[];
+  shadowPadding: number;
+  svgPath: string | null;
+  blurClipPath: string | null;
+  blurStyle: CSSProperties;
+  visible: boolean;
+  childTransitionStyle: CSSProperties;
+  /**
+   * Pixel offset to apply as a CSS transform on the tooltip element so that
+   * the (clamped) SVG arrow aligns with the trigger center even when the
+   * trigger is too small / close to a rounded corner for the arrow to reach.
+   */
+  tooltipShift: {
+    x: number;
+    y: number;
+  };
+  /**
+   * Pass as the `updatePosition` prop to the Ariakit `<Tooltip>` component.
+   * This hooks into floating-ui's positioning lifecycle so the SVG arrow
+   * center is read after every `computePosition`
+   */
+  onPositionUpdate: (props: {
+    updatePosition: () => Promise<void>;
+  }) => Promise<void>;
+}
+declare function useTooltipContent({
+  open,
+  effectivePlacement,
+  maxWidth,
+  borderRadius,
+  arrowRef
+}: UseTooltipContentOptions): UseTooltipContentReturn;
+//#endregion
+export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };

package/dist/components/client/Tooltip/useTooltipContent.js

@@ -0,0 +1,184 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { DROP_SHADOW_PREFIX } from "../../../css-tokens/dist/index.js";
+import { ARROW_HEIGHT, generateTooltipPath, getArrowClampDelta, getArrowSide, parseShadow } from "./util.js";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+
+//#region src/components/client/Tooltip/useTooltipContent.ts
+function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef }) {
+	const internalRef = useRef(null);
+	const shadowFilterId = useId();
+	const [dimensions, setDimensions] = useState({
+		width: 0,
+		height: 0
+	});
+	const maxWidthClass = useMemo(() => {
+		if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
+		return "max-w-lg";
+	}, [maxWidth]);
+	useEffect(() => {
+		const el = internalRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => {
+			setDimensions({
+				width: el.offsetWidth,
+				height: el.offsetHeight
+			});
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [open]);
+	const [shadows, setShadows] = useState([]);
+	const shadowValueRef = useRef("");
+	const readShadows = useCallback(() => {
+		if (!internalRef.current) return;
+		const shadowValue = getComputedStyle(internalRef.current).getPropertyValue(`--${DROP_SHADOW_PREFIX}`);
+		if (shadowValue !== shadowValueRef.current) {
+			shadowValueRef.current = shadowValue;
+			setShadows(parseShadow(shadowValue));
+		}
+	}, []);
+	const shadowPadding = useMemo(() => {
+		if (shadows.length === 0) return 0;
+		return shadows.reduce((max, s) => {
+			const extentX = Math.abs(s.x) + s.blur + Math.abs(s.spread);
+			const extentY = Math.abs(s.y) + s.blur + Math.abs(s.spread);
+			return Math.max(max, extentX, extentY);
+		}, 0);
+	}, [shadows]);
+	const [arrowCenter, setArrowCenter] = useState(void 0);
+	const computeArrowCenter = useCallback(() => {
+		const arrowEl = arrowRef.current;
+		const tooltipEl = internalRef.current;
+		if (!arrowEl || !tooltipEl) return;
+		const arrowRect = arrowEl.getBoundingClientRect();
+		const tooltipRect = tooltipEl.getBoundingClientRect();
+		const side = getArrowSide(effectivePlacement);
+		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - tooltipRect.left : arrowRect.top + arrowRect.height / 2 - tooltipRect.top;
+		return Math.round(raw);
+	}, [arrowRef, effectivePlacement]);
+	const onPositionUpdate = useCallback(async ({ updatePosition }) => {
+		await updatePosition();
+		const el = internalRef.current;
+		if (el) {
+			const { offsetWidth, offsetHeight } = el;
+			if (offsetWidth > 0 && offsetHeight > 0) setDimensions((prev) => {
+				if (prev.width === offsetWidth && prev.height === offsetHeight) return prev;
+				return {
+					width: offsetWidth,
+					height: offsetHeight
+				};
+			});
+			readShadows();
+		}
+		const next = computeArrowCenter();
+		if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
+	}, [computeArrowCenter, readShadows]);
+	const svgPath = useMemo(() => {
+		return dimensions.width > 0 && dimensions.height > 0 ? generateTooltipPath({
+			width: dimensions.width,
+			height: dimensions.height,
+			placement: effectivePlacement,
+			borderRadius,
+			arrowCenter
+		}) : null;
+	}, [
+		effectivePlacement,
+		dimensions.width,
+		dimensions.height,
+		borderRadius,
+		arrowCenter
+	]);
+	const blurClipPath = useMemo(() => {
+		if (dimensions.width <= 0 || dimensions.height <= 0) return null;
+		const arrowSide = getArrowSide(effectivePlacement);
+		const offsetX = arrowSide === "left" ? ARROW_HEIGHT : 0;
+		const offsetY = arrowSide === "top" ? ARROW_HEIGHT : 0;
+		return generateTooltipPath({
+			width: dimensions.width,
+			height: dimensions.height,
+			placement: effectivePlacement,
+			borderRadius,
+			arrowCenter,
+			offsetX,
+			offsetY
+		});
+	}, [
+		effectivePlacement,
+		dimensions.width,
+		dimensions.height,
+		borderRadius,
+		arrowCenter
+	]);
+	const blurStyle = useMemo(() => {
+		const style = { clipPath: blurClipPath ? `path('${blurClipPath}')` : void 0 };
+		switch (getArrowSide(effectivePlacement)) {
+			case "top":
+				style.height = `calc(100% + ${ARROW_HEIGHT}px)`;
+				style.top = "auto";
+				style.bottom = "0";
+				break;
+			case "bottom":
+				style.height = `calc(100% + ${ARROW_HEIGHT}px)`;
+				break;
+			case "left":
+				style.width = `calc(100% + ${ARROW_HEIGHT}px)`;
+				style.left = "auto";
+				style.right = "0";
+				break;
+			case "right":
+				style.width = `calc(100% + ${ARROW_HEIGHT}px)`;
+				break;
+		}
+		return style;
+	}, [blurClipPath, effectivePlacement]);
+	const [visible, setVisible] = useState(false);
+	if ((!open || !svgPath) && visible) setVisible(false);
+	useEffect(() => {
+		if (open && svgPath) {
+			const raf = requestAnimationFrame(() => {
+				setVisible(true);
+			});
+			return () => cancelAnimationFrame(raf);
+		}
+	}, [open, svgPath]);
+	return {
+		internalRef,
+		shadowFilterId,
+		maxWidthClass,
+		dimensions,
+		shadows,
+		shadowPadding,
+		svgPath,
+		blurClipPath,
+		blurStyle,
+		visible,
+		childTransitionStyle: {
+			opacity: visible ? 1 : 0,
+			transition: "opacity 200ms ease-in-out"
+		},
+		tooltipShift: useMemo(() => {
+			if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
+				x: 0,
+				y: 0
+			};
+			return getArrowClampDelta({
+				width: dimensions.width,
+				height: dimensions.height,
+				placement: effectivePlacement,
+				borderRadius,
+				arrowCenter
+			});
+		}, [
+			arrowCenter,
+			dimensions.width,
+			dimensions.height,
+			effectivePlacement,
+			borderRadius
+		]),
+		onPositionUpdate
+	};
+}
+
+//#endregion
+export { useTooltipContent };