@primer/react 38.40.0-rc.28e5764e2 → 38.40.0-rc.37bd8a025

package/CHANGELOG.md

@@ -4,12 +4,18 @@
 
 ### Minor Changes
 
+- [#8422](https://github.com/primer/react/pull/8422) [`2909f19`](https://github.com/primer/react/commit/2909f19f64dbbc12aefb3455139596d88e5098b2) Thanks [@tay1orjones](https://github.com/tay1orjones)! - NavList, ActionList: Add a `disableItemGap` prop to render navigation items edge-to-edge.
+
 - [#8386](https://github.com/primer/react/pull/8386) [`6c64598`](https://github.com/primer/react/commit/6c645987c5ad27d5c23f57190a10b8707b29c58c) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add config-driven row groups that can be interleaved with standalone rows.
 
 ### Patch Changes
 
 - [#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/ActionList/List.js

@@ -17,7 +17,7 @@ import { clsx } from "clsx";
 //#region src/ActionList/List.tsx
 const UnwrappedList = (props, forwardedRef) => {
 	var _slots$heading$props$;
-	const $ = c(40);
+	const $ = c(41);
 	let className;
 	let restProps;
 	let role;
@@ -26,8 +26,9 @@ const UnwrappedList = (props, forwardedRef) => {
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== props) {
-		({as: t0, variant: t1, selectionVariant, showDividers: t2, role, disableFocusZone: t3, className, ...restProps} = props);
+		({as: t0, variant: t1, selectionVariant, showDividers: t2, role, disableFocusZone: t3, disableItemGap: t4, className, ...restProps} = props);
 		$[0] = props;
 		$[1] = className;
 		$[2] = restProps;
@@ -37,6 +38,7 @@ const UnwrappedList = (props, forwardedRef) => {
 		$[6] = t1;
 		$[7] = t2;
 		$[8] = t3;
+		$[9] = t4;
 	} else {
 		className = $[1];
 		restProps = $[2];
@@ -46,17 +48,19 @@ const UnwrappedList = (props, forwardedRef) => {
 		t1 = $[6];
 		t2 = $[7];
 		t3 = $[8];
+		t4 = $[9];
 	}
 	const Component = t0 === void 0 ? "ul" : t0;
 	const variant = t1 === void 0 ? "inset" : t1;
 	const showDividers = t2 === void 0 ? false : t2;
 	const disableFocusZone = t3 === void 0 ? false : t3;
-	let t4;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { heading: Heading };
-		$[9] = t4;
-	} else t4 = $[9];
-	const [slots, childrenWithoutSlots] = useSlots(restProps.children, t4);
+	const disableItemGap = t4 === void 0 ? false : t4;
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { heading: Heading };
+		$[10] = t5;
+	} else t5 = $[10];
+	const [slots, childrenWithoutSlots] = useSlots(restProps.children, t5);
 	const headingId = useId$1();
 	const { listRole: listRoleFromContainer, listLabelledBy, selectionVariant: containerSelectionVariant, enableFocusZone: enableFocusZoneFromContainer, container } = React.useContext(ActionListContainerContext);
 	const ariaLabelledBy = slots.heading ? (_slots$heading$props$ = slots.heading.props.id) !== null && _slots$heading$props$ !== void 0 ? _slots$heading$props$ : headingId : listLabelledBy;
@@ -67,58 +71,58 @@ const UnwrappedList = (props, forwardedRef) => {
 	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
 	const readRef = mergedRefEnabled ? listRef : providedOrCreatedRef;
 	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
-	const itemGapEnabled = useFeatureFlag("primer_react_action_list_item_gap") && container === "NavList";
+	const itemGapEnabled = useFeatureFlag("primer_react_action_list_item_gap") && !disableItemGap && container === "NavList";
 	let enableFocusZone = false;
 	if (enableFocusZoneFromContainer !== void 0) enableFocusZone = enableFocusZoneFromContainer;
 	else if (listRole && !disableFocusZone) {
-		let t5;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = [
+		let t6;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = [
 				"menu",
 				"menubar",
 				"listbox"
 			];
-			$[10] = t5;
-		} else t5 = $[10];
-		enableFocusZone = t5.includes(listRole);
+			$[11] = t6;
+		} else t6 = $[11];
+		enableFocusZone = t6.includes(listRole);
 	}
-	const t5 = !enableFocusZone;
-	const t6 = listRole === "menu" || container === "SelectPanel" || container === "FilteredActionList" ? "wrap" : void 0;
-	let t7;
-	if ($[11] !== readRef || $[12] !== t5 || $[13] !== t6) {
-		t7 = {
-			disabled: t5,
+	const t6 = !enableFocusZone;
+	const t7 = listRole === "menu" || container === "SelectPanel" || container === "FilteredActionList" ? "wrap" : void 0;
+	let t8;
+	if ($[12] !== readRef || $[13] !== t6 || $[14] !== t7) {
+		t8 = {
+			disabled: t6,
 			containerRef: readRef,
 			bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
-			focusOutBehavior: t6
+			focusOutBehavior: t7
 		};
-		$[11] = readRef;
-		$[12] = t5;
+		$[12] = readRef;
 		$[13] = t6;
 		$[14] = t7;
-	} else t7 = $[14];
-	useFocusZone(t7);
-	const t8 = selectionVariant || containerSelectionVariant;
-	let t9;
-	if ($[15] !== headingId || $[16] !== listRole || $[17] !== showDividers || $[18] !== t8 || $[19] !== variant) {
-		t9 = {
+		$[15] = t8;
+	} else t8 = $[15];
+	useFocusZone(t8);
+	const t9 = selectionVariant || containerSelectionVariant;
+	let t10;
+	if ($[16] !== headingId || $[17] !== listRole || $[18] !== showDividers || $[19] !== t9 || $[20] !== variant) {
+		t10 = {
 			variant,
-			selectionVariant: t8,
+			selectionVariant: t9,
 			showDividers,
 			role: listRole,
 			headingId
 		};
-		$[15] = headingId;
-		$[16] = listRole;
-		$[17] = showDividers;
-		$[18] = t8;
-		$[19] = variant;
-		$[20] = t9;
-	} else t9 = $[20];
-	const listContextValue = t9;
-	let t10;
-	if ($[21] !== readRef.current) {
-		t10 = () => {
+		$[16] = headingId;
+		$[17] = listRole;
+		$[18] = showDividers;
+		$[19] = t9;
+		$[20] = variant;
+		$[21] = t10;
+	} else t10 = $[21];
+	const listContextValue = t10;
+	let t11;
+	if ($[22] !== readRef.current) {
+		t11 = () => {
 			const list = readRef.current;
 			if (!list) return;
 			const hasMixed = list.querySelector("[data-has-description=\"true\"]") !== null && list.querySelector("[data-has-description=\"false\"]") !== null;
@@ -126,56 +130,56 @@ const UnwrappedList = (props, forwardedRef) => {
 			if (hasMixed && current !== "true") list.setAttribute("data-mixed-descriptions", "true");
 			else if (!hasMixed && current !== null) list.removeAttribute("data-mixed-descriptions");
 		};
-		$[21] = readRef.current;
-		$[22] = t10;
-	} else t10 = $[22];
-	useIsomorphicLayoutEffect(t10);
-	const t11 = slots.heading;
-	let t12;
-	if ($[23] !== className) {
-		t12 = clsx(ActionList_module_css_default.ActionList, className);
-		$[23] = className;
-		$[24] = t12;
-	} else t12 = $[24];
-	const t13 = itemGapEnabled ? "" : void 0;
-	let t14;
-	if ($[25] !== Component || $[26] !== appliedRef || $[27] !== ariaLabelledBy || $[28] !== childrenWithoutSlots || $[29] !== listRole || $[30] !== restProps || $[31] !== showDividers || $[32] !== t12 || $[33] !== t13 || $[34] !== variant) {
-		t14 = /*#__PURE__*/ jsx(Component, {
-			className: t12,
+		$[22] = readRef.current;
+		$[23] = t11;
+	} else t11 = $[23];
+	useIsomorphicLayoutEffect(t11);
+	const t12 = slots.heading;
+	let t13;
+	if ($[24] !== className) {
+		t13 = clsx(ActionList_module_css_default.ActionList, className);
+		$[24] = className;
+		$[25] = t13;
+	} else t13 = $[25];
+	const t14 = itemGapEnabled ? "" : void 0;
+	let t15;
+	if ($[26] !== Component || $[27] !== appliedRef || $[28] !== ariaLabelledBy || $[29] !== childrenWithoutSlots || $[30] !== listRole || $[31] !== restProps || $[32] !== showDividers || $[33] !== t13 || $[34] !== t14 || $[35] !== variant) {
+		t15 = /*#__PURE__*/ jsx(Component, {
+			className: t13,
 			role: listRole,
 			"aria-labelledby": ariaLabelledBy,
 			ref: appliedRef,
 			"data-component": "ActionList",
 			"data-dividers": showDividers,
 			"data-variant": variant,
-			"data-item-gap": t13,
+			"data-item-gap": t14,
 			...restProps,
 			children: childrenWithoutSlots
 		});
-		$[25] = Component;
-		$[26] = appliedRef;
-		$[27] = ariaLabelledBy;
-		$[28] = childrenWithoutSlots;
-		$[29] = listRole;
-		$[30] = restProps;
-		$[31] = showDividers;
-		$[32] = t12;
+		$[26] = Component;
+		$[27] = appliedRef;
+		$[28] = ariaLabelledBy;
+		$[29] = childrenWithoutSlots;
+		$[30] = listRole;
+		$[31] = restProps;
+		$[32] = showDividers;
 		$[33] = t13;
-		$[34] = variant;
-		$[35] = t14;
-	} else t14 = $[35];
-	let t15;
-	if ($[36] !== listContextValue || $[37] !== slots.heading || $[38] !== t14) {
-		t15 = /*#__PURE__*/ jsxs(ListContext.Provider, {
+		$[34] = t14;
+		$[35] = variant;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== listContextValue || $[38] !== slots.heading || $[39] !== t15) {
+		t16 = /*#__PURE__*/ jsxs(ListContext.Provider, {
 			value: listContextValue,
-			children: [t11, t14]
+			children: [t12, t15]
 		});
-		$[36] = listContextValue;
-		$[37] = slots.heading;
-		$[38] = t14;
+		$[37] = listContextValue;
+		$[38] = slots.heading;
 		$[39] = t15;
-	} else t15 = $[39];
-	return t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	return t16;
 };
 const List = fixedForwardRef(UnwrappedList);
 Object.assign(List, { displayName: "ActionList" });

package/dist/ActionList/index.d.ts

@@ -22,6 +22,7 @@ declare const ActionList: (<As extends React.ElementType = "ul">(props: Distribu
   role?: AriaRole;
   disableFocusZone?: boolean;
   className?: string;
+  disableItemGap?: boolean;
 } & {
   children?: import("react").ReactNode | undefined;
 }, "as"> & {

package/dist/ActionList/shared.d.ts

@@ -100,6 +100,10 @@ type ActionListProps<As extends React.ElementType = 'ul'> = PolymorphicProps<As,
    */
   disableFocusZone?: boolean;
   className?: string;
+  /**
+   * Disable the gap between items when this `ActionList` is rendered in a `NavList`.
+   */
+  disableItemGap?: boolean;
 }>>;
 //#endregion
 export { ActionListItemProps, ActionListProps };

package/dist/NavList/NavList.d.ts

@@ -12,7 +12,8 @@ import { Icon } from "@primer/octicons-react";
 //#region src/NavList/NavList.d.ts
 type NavListHeadingLevels = 'h2' | 'h3';
 type NavListProps = {
-  children: React.ReactNode;
+  children: React.ReactNode; /** Disable the gap between items when the item gap feature is enabled. */
+  disableItemGap?: boolean;
 } & React.ComponentProps<'nav'>;
 type NavListHeadingProps = {
   /** Semantic heading level for the NavList. Also sets the default level for child group headings, which render one level deeper. */as?: NavListHeadingLevels; /** Visually hide the heading while keeping it available to assistive technology. */

package/dist/NavList/NavList.js

@@ -26,76 +26,83 @@ function levelToHeadingTag(level) {
 }
 const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
 	var _heading$props$id, _ariaLabelledby;
-	const $ = c(24);
+	const $ = c(26);
 	let ariaLabel;
 	let ariaLabelledby;
 	let children;
+	let disableItemGap;
 	let props;
 	if ($[0] !== t0) {
-		({children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props} = t0);
+		({children, disableItemGap, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props} = t0);
 		$[0] = t0;
 		$[1] = ariaLabel;
 		$[2] = ariaLabelledby;
 		$[3] = children;
-		$[4] = props;
+		$[4] = disableItemGap;
+		$[5] = props;
 	} else {
 		ariaLabel = $[1];
 		ariaLabelledby = $[2];
 		children = $[3];
-		props = $[4];
+		disableItemGap = $[4];
+		props = $[5];
 	}
 	let t1;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = { heading: Heading };
-		$[5] = t1;
-	} else t1 = $[5];
+		$[6] = t1;
+	} else t1 = $[6];
 	const [slots, childrenWithoutHeading] = useSlots(children, t1);
 	const fallbackHeadingId = useId$1();
 	const heading = slots.heading;
 	const headingId = heading ? (_heading$props$id = heading.props.id) !== null && _heading$props$id !== void 0 ? _heading$props$id : fallbackHeadingId : void 0;
 	let t2;
-	if ($[6] !== heading) {
+	if ($[7] !== heading) {
 		var _heading$props$as;
 		t2 = heading ? headingTagToLevel((_heading$props$as = heading.props.as) !== null && _heading$props$as !== void 0 ? _heading$props$as : "h2") : null;
-		$[6] = heading;
-		$[7] = t2;
-	} else t2 = $[7];
+		$[7] = heading;
+		$[8] = t2;
+	} else t2 = $[8];
 	const headingLevel = t2;
 	const navLabelledby = (_ariaLabelledby = ariaLabelledby) !== null && _ariaLabelledby !== void 0 ? _ariaLabelledby : ariaLabel ? void 0 : headingId;
 	let t3;
-	if ($[8] !== heading || $[9] !== headingId) {
+	if ($[9] !== heading || $[10] !== headingId) {
 		t3 = heading ? /*#__PURE__*/ React.cloneElement(heading, { id: headingId }) : null;
-		$[8] = heading;
-		$[9] = headingId;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[9] = heading;
+		$[10] = headingId;
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = { container: "NavList" };
-		$[11] = t4;
-	} else t4 = $[11];
+		$[12] = t4;
+	} else t4 = $[12];
 	let t5;
-	if ($[12] !== childrenWithoutHeading) {
+	if ($[13] !== childrenWithoutHeading || $[14] !== disableItemGap) {
 		t5 = /*#__PURE__*/ jsx(ActionListContainerContext.Provider, {
 			value: t4,
-			children: /*#__PURE__*/ jsx(ActionList, { children: childrenWithoutHeading })
+			children: /*#__PURE__*/ jsx(ActionList, {
+				disableItemGap,
+				children: childrenWithoutHeading
+			})
 		});
-		$[12] = childrenWithoutHeading;
-		$[13] = t5;
-	} else t5 = $[13];
+		$[13] = childrenWithoutHeading;
+		$[14] = disableItemGap;
+		$[15] = t5;
+	} else t5 = $[15];
 	let t6;
-	if ($[14] !== headingLevel || $[15] !== t3 || $[16] !== t5) {
+	if ($[16] !== headingLevel || $[17] !== t3 || $[18] !== t5) {
 		t6 = /*#__PURE__*/ jsxs(NavListHeadingLevelContext.Provider, {
 			value: headingLevel,
 			children: [t3, t5]
 		});
-		$[14] = headingLevel;
-		$[15] = t3;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
+		$[16] = headingLevel;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
 	let t7;
-	if ($[18] !== ariaLabel || $[19] !== navLabelledby || $[20] !== props || $[21] !== ref || $[22] !== t6) {
+	if ($[20] !== ariaLabel || $[21] !== navLabelledby || $[22] !== props || $[23] !== ref || $[24] !== t6) {
 		t7 = /*#__PURE__*/ jsx("nav", {
 			...props,
 			"aria-label": ariaLabel,
@@ -104,13 +111,13 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
 			"data-component": "NavList",
 			children: t6
 		});
-		$[18] = ariaLabel;
-		$[19] = navLabelledby;
-		$[20] = props;
-		$[21] = ref;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
+		$[20] = ariaLabel;
+		$[21] = navLabelledby;
+		$[22] = props;
+		$[23] = ref;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
 	return t7;
 });
 Root.displayName = "NavList";

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/generated/components.json

@@ -212,6 +212,10 @@
           "id": "components-actionlist-features--item-dividers",
           "code": "() => (\n  <ActionList showDividers>\n    <ActionList.Item>Copy link</ActionList.Item>\n    <ActionList.Item>Quote reply</ActionList.Item>\n    <ActionList.Item>Edit comment</ActionList.Item>\n  </ActionList>\n)"
         },
+        {
+          "id": "components-actionlist-features--disable-item-gap",
+          "code": "() => (\n  <FeatureFlags\n    flags={{\n      primer_react_action_list_item_gap: true,\n    }}\n  >\n    <ActionList.ContainerContext.Provider\n      value={{\n        container: 'NavList',\n      }}\n    >\n      <Heading as=\"h3\">Default item gap</Heading>\n      <ActionList>\n        <ActionList.Item>Copy link</ActionList.Item>\n        <ActionList.Item>Quote reply</ActionList.Item>\n        <ActionList.Item>Edit comment</ActionList.Item>\n      </ActionList>\n\n      <Heading as=\"h3\">Item gap disabled</Heading>\n      <ActionList disableItemGap>\n        <ActionList.Item>Copy link</ActionList.Item>\n        <ActionList.Item>Quote reply</ActionList.Item>\n        <ActionList.Item>Edit comment</ActionList.Item>\n      </ActionList>\n    </ActionList.ContainerContext.Provider>\n  </FeatureFlags>\n)"
+        },
         {
           "id": "components-actionlist-features--single-divider",
           "code": "() => (\n  <ActionList>\n    <ActionList.Item>Copy link</ActionList.Item>\n    <ActionList.Item>Quote reply</ActionList.Item>\n    <ActionList.Item>Edit comment</ActionList.Item>\n    <ActionList.Divider />\n    <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n  </ActionList>\n)"
@@ -365,6 +369,12 @@
           "type": "AriaRole",
           "defaultValue": "",
           "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values."
+        },
+        {
+          "name": "disableItemGap",
+          "type": "boolean",
+          "description": "Disable the gap between items when this `ActionList` is rendered in a `NavList`.",
+          "defaultValue": "false"
         }
       ],
       "subcomponents": [
@@ -4234,6 +4244,12 @@
           "defaultValue": "",
           "description": ""
         },
+        {
+          "name": "disableItemGap",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Disable the gap between items when the item gap feature is enabled."
+        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLElement>"

package/package.json

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