@primer/react 38.40.0-rc.629dc4f91 → 38.40.0-rc.960078edf

package/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 - [#8408](https://github.com/primer/react/pull/8408) [`c880319`](https://github.com/primer/react/commit/c8803199ddb0e669596f6e2370fd4117a055cfc3) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Button and LinkButton: Limit link variant underlines to the text label when visuals are present
 
+- [#8411](https://github.com/primer/react/pull/8411) [`8c52029`](https://github.com/primer/react/commit/8c520293151054fd39e5094f4740e97e89ce18d8) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Tooltip: Prevent React Fragment triggers from crashing and provide a clear development warning
+
+- [#8409](https://github.com/primer/react/pull/8409) [`9d0632c`](https://github.com/primer/react/commit/9d0632ccc6c23e92cbbe786ce922795c92931b04) Thanks [@iansan5653](https://github.com/iansan5653)! - Fix Tooltip ref handling to preserve child element ref
+
 ## 38.39.0
 
 ### Minor Changes

package/dist/TooltipV2/Tooltip.js

@@ -1,3 +1,4 @@
+import { reactMajorVersion } from "../utils/environment.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
@@ -82,10 +83,14 @@ const emptyKeybindingHints = [];
 const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type = "description", children, id, className, keybindingHint = emptyKeybindingHints, delay = "short", _privateDisableTooltip = false, ...rest }, forwardedRef) => {
 	const tooltipId = useId$1(id);
 	const child = Children.only(children);
+	const isFragmentTrigger = /*#__PURE__*/ React.isValidElement(child) && child.type === React.Fragment;
+	warning(isFragmentTrigger, "The `Tooltip` component does not support a React Fragment as its trigger. Pass a single interactive element instead.");
+	const elementChild = /*#__PURE__*/ React.isValidElement(child) ? child : void 0;
+	const childRef = reactMajorVersion > 18 ? elementChild === null || elementChild === void 0 ? void 0 : elementChild.props.ref : elementChild === null || elementChild === void 0 ? void 0 : elementChild.ref;
 	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
 	const triggerRef = useRef(null);
-	const mergedTriggerRef = useMergedRefs(triggerRef, forwardedRef);
-	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
+	const mergedTriggerRef = useMergedRefs(triggerRef, useMergedRefs(forwardedRef, childRef));
+	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : childRef);
 	const readTriggerRef = mergedRefEnabled ? triggerRef : providedOrCreatedRef;
 	const appliedTriggerRef = mergedRefEnabled ? mergedTriggerRef : providedOrCreatedRef;
 	const tooltipElRef = useRef(null);
@@ -95,7 +100,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 	const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
 	const openTooltip = () => {
 		try {
-			if (tooltipElRef.current && readTriggerRef.current && tooltipElRef.current.hasAttribute("popover") && !tooltipElRef.current.matches(":popover-open") && !_privateDisableTooltip) {
+			if (tooltipElRef.current && readTriggerRef.current instanceof HTMLElement && tooltipElRef.current.hasAttribute("popover") && !tooltipElRef.current.matches(":popover-open") && !_privateDisableTooltip) {
 				const tooltip = tooltipElRef.current;
 				const trigger = readTriggerRef.current;
 				tooltip.showPopover();
@@ -131,15 +136,19 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 	const value = useMemo(() => ({ tooltipId }), [tooltipId]);
 	useEffect(() => {
 		if (!tooltipElRef.current || !readTriggerRef.current) return;
-		const isTriggerInteractive = isInteractive(readTriggerRef.current);
-		const triggerChildren = readTriggerRef.current.childNodes;
+		const trigger = readTriggerRef.current;
+		const isInvalidTrigger = !(trigger instanceof HTMLElement);
+		warning(isInvalidTrigger, "The `Tooltip` component expects its trigger ref to resolve to an HTML element. Ensure the trigger forwards its ref to a single interactive element instead of a React Fragment.");
+		if (isInvalidTrigger) return;
+		const isTriggerInteractive = isInteractive(trigger);
+		const triggerChildren = trigger.childNodes;
 		const hasInteractiveDescendant = Array.from(triggerChildren).some((child) => {
 			return child instanceof HTMLElement && isInteractive(child) || Array.from(child.childNodes).some((grandChild) => grandChild instanceof HTMLElement && isInteractive(grandChild));
 		});
 		!(isTriggerInteractive || hasInteractiveDescendant) && invariant(false, "The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.");
 		if (type === "label") {
-			const hasAriaLabel = readTriggerRef.current.hasAttribute("aria-label");
-			const hasAriaLabelInChildren = Array.from(readTriggerRef.current.childNodes).some((child) => child instanceof HTMLElement && child.hasAttribute("aria-label"));
+			const hasAriaLabel = trigger.hasAttribute("aria-label");
+			const hasAriaLabelInChildren = Array.from(trigger.childNodes).some((child) => child instanceof HTMLElement && child.hasAttribute("aria-label"));
 			warning(hasAriaLabel || hasAriaLabelInChildren, "The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.");
 		}
 		if (typeof window !== "undefined") {
@@ -162,6 +171,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 	const platform = usePlatform();
 	const hasAriaLabel = "aria-label" in rest;
 	const keybindingHints = Array.isArray(keybindingHint) ? keybindingHint : [keybindingHint];
+	if (isFragmentTrigger) return child;
 	return /*#__PURE__*/ jsx(TooltipContext.Provider, {
 		value,
 		children: /*#__PURE__*/ jsxs(Fragment$1, { children: [/*#__PURE__*/ React.isValidElement(child) && /*#__PURE__*/ React.cloneElement(child, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.40.0-rc.629dc4f91",
+  "version": "38.40.0-rc.960078edf",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",