@primer/react 38.34.0-rc.ac0faffd6 → 38.34.0-rc.d17f87af7

package/dist/Overlay/Overlay.js

@@ -1,8 +1,8 @@
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useOverlay } from "../hooks/useOverlay.js";
-import Portal_default from "../Portal/index.js";
 import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
+import Portal_default from "../Portal/index.js";
 import Overlay_module_css_default from "./Overlay.module.css.js";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";

package/dist/PageHeader/PageHeader.js

@@ -1,6 +1,8 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { warning } from "../utils/warning.js";
 import { isSlot } from "../utils/is-slot.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import Heading from "../Heading/Heading.js";
@@ -10,7 +12,7 @@ import PageHeader_module_css_default from "./PageHeader.module.css.js";
 import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { ArrowLeftIcon } from "@primer/octicons-react";
 //#region src/PageHeader/PageHeader.tsx
 const hiddenOnRegularAndWide = {
@@ -27,7 +29,12 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const $ = c(17);
 	const { children, className, as: t1, "aria-label": ariaLabel, role, hasBorder } = t0;
 	const BaseComponent = t1 === void 0 ? "div" : t1;
-	const rootRef = useProvidedRefOrCreate(forwardedRef);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const rootRef = useRef(null);
+	const mergedRef = useMergedRefs(rootRef, forwardedRef);
+	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
+	const readRef = mergedRefEnabled ? rootRef : providedOrCreatedRef;
+	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	const hoistChildState = (nodes) => {
 		const result = { hasNavigation: false };
 		for (const child of React.Children.toArray(nodes)) {
@@ -54,12 +61,12 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const isInteractive = _temp;
 	let t2;
 	let t3;
-	if ($[0] !== children || $[1] !== rootRef) {
+	if ($[0] !== children || $[1] !== readRef) {
 		t2 = function validateInteractiveElementsInTitle() {
 			let hasContextArea = false;
 			let hasLeadingAction = false;
-			if (!rootRef.current || rootRef.current.children.length <= 0) return;
-			const titleArea = Array.from(rootRef.current.children).find(_temp2);
+			if (!readRef.current || readRef.current.children.length <= 0) return;
+			const titleArea = Array.from(readRef.current.children).find(_temp2);
 			if (!titleArea) return;
 			for (const child_1 of React.Children.toArray(children)) {
 				if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === ContextArea || isSlot(child_1, ContextArea))) hasContextArea = true;
@@ -67,9 +74,9 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 			}
 			warning(Array.from(titleArea.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2) || Array.from(child_2.childNodes).some((child_3) => child_3 instanceof HTMLElement && isInteractive(child_3))) && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
 		};
-		t3 = [children, rootRef];
+		t3 = [children, readRef];
 		$[0] = children;
-		$[1] = rootRef;
+		$[1] = readRef;
 		$[2] = t2;
 		$[3] = t3;
 	} else {
@@ -89,9 +96,9 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const t8 = getResponsiveAttributes("title-size-variant", titleVariant);
 	const t9 = getNavHiddenDataAttributes(navigationHidden);
 	let t10;
-	if ($[6] !== BaseComponent || $[7] !== ariaLabel || $[8] !== children || $[9] !== role || $[10] !== rootRef || $[11] !== t4 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
+	if ($[6] !== BaseComponent || $[7] !== appliedRef || $[8] !== ariaLabel || $[9] !== children || $[10] !== role || $[11] !== t4 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
 		t10 = /*#__PURE__*/ jsx(BaseComponent, {
-			ref: rootRef,
+			ref: appliedRef,
 			className: t4,
 			"data-component": t5,
 			"data-has-border": t6,
@@ -103,10 +110,10 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 			children
 		});
 		$[6] = BaseComponent;
-		$[7] = ariaLabel;
-		$[8] = children;
-		$[9] = role;
-		$[10] = rootRef;
+		$[7] = appliedRef;
+		$[8] = ariaLabel;
+		$[9] = children;
+		$[10] = role;
 		$[11] = t4;
 		$[12] = t6;
 		$[13] = t7;
@@ -295,7 +302,9 @@ const TitleArea = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const { children, className, hidden: t1, variant: t2 } = t0;
 	const hidden = t1 === void 0 ? false : t1;
 	const variant = t2 === void 0 ? "medium" : t2;
-	const titleAreaRef = useProvidedRefOrCreate(forwardedRef);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
+	const appliedRef = mergedRefEnabled ? forwardedRef : providedOrCreatedRef;
 	let t3;
 	if ($[0] !== className) {
 		t3 = clsx(PageHeader_module_css_default.TitleArea, className);
@@ -315,20 +324,20 @@ const TitleArea = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 		$[5] = t5;
 	} else t5 = $[5];
 	let t6;
-	if ($[6] !== children || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== titleAreaRef) {
+	if ($[6] !== appliedRef || $[7] !== children || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
 		t6 = /*#__PURE__*/ jsx("div", {
 			className: t3,
-			ref: titleAreaRef,
+			ref: appliedRef,
 			"data-component": "TitleArea",
 			...t4,
 			...t5,
 			children
 		});
-		$[6] = children;
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-		$[10] = titleAreaRef;
+		$[6] = appliedRef;
+		$[7] = children;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
 		$[11] = t6;
 	} else t6 = $[11];
 	return t6;

package/dist/SelectPanel/SelectPanel.js

@@ -2,13 +2,13 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
 import { isAlphabetKey } from "../hooks/useMnemonics.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import useSafeTimeout from "../hooks/useSafeTimeout.js";
 import { IconButton } from "../Button/IconButton.js";
 import { LinkButton } from "../Button/LinkButton.js";
 import { ButtonComponent } from "../Button/Button.js";
 import { useResponsiveValue } from "../hooks/useResponsiveValue.js";
 import Heading from "../Heading/Heading.js";
-import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { AnchoredOverlay } from "../AnchoredOverlay/AnchoredOverlay.js";
 import { Banner } from "../Banner/index.js";
 import { useFormControlContext } from "../FormControl/_FormControlContext.js";

package/dist/TextInput/TextInput.js

@@ -1,5 +1,7 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import Text_default from "../Text/Text.js";
 import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
 import VisuallyHidden from "../_VisuallyHidden.js";
@@ -11,14 +13,19 @@ import UnstyledTextInput from "../internal/components/UnstyledTextInput.js";
 import { getCharacterCountState } from "../utils/character-counter.js";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useId, useState } from "react";
+import React, { useCallback, useId, useRef, useState } from "react";
 import { isValidElementType } from "react-is";
 import { AlertFillIcon } from "@primer/octicons-react";
 //#region src/TextInput/TextInput.tsx
 const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction, block, className, contrast, disabled, loading, loaderPosition = "auto", loaderText = "Loading", monospace, validationStatus, size: sizeProp, onFocus, onBlur, variant: variantProp, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, type = "text", required, characterLimit, onChange, value, defaultValue, "data-component": dataComponent, ...inputProps }, ref) => {
 	var _counter$isOverLimit;
 	const [isInputFocused, setIsInputFocused] = useState(false);
-	const inputRef = useProvidedRefOrCreate(ref);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const inputRef = useRef(null);
+	const mergedRef = useMergedRefs(inputRef, ref);
+	const providedOrCreatedRef = useProvidedRefOrCreate(ref);
+	const readRef = mergedRefEnabled ? inputRef : providedOrCreatedRef;
+	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	const isControlled = value !== void 0;
 	const [uncontrolledLength, setUncontrolledLength] = useState(() => defaultValue !== void 0 ? String(defaultValue).length : 0);
 	const currentLength = isControlled ? String(value).length : uncontrolledLength;
@@ -29,9 +36,9 @@ const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leading
 	const showTrailingLoadingIndicator = loading && (loaderPosition === "trailing" || Boolean(loaderPosition === "auto" && !LeadingVisual));
 	const isSegmentedInputType = type === "date" || type === "time" || type === "datetime-local";
 	const focusInput = (e) => {
-		if (e.target !== inputRef.current || !isSegmentedInputType) {
-			var _inputRef$current;
-			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+		if (e.target !== readRef.current || !isSegmentedInputType) {
+			var _readRef$current;
+			(_readRef$current = readRef.current) === null || _readRef$current === void 0 || _readRef$current.focus();
 		}
 	};
 	const leadingVisualId = useId();
@@ -88,7 +95,7 @@ const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leading
 				children: typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual) ? /*#__PURE__*/ jsx(LeadingVisual, {}) : LeadingVisual
 			}),
 			/*#__PURE__*/ jsx(UnstyledTextInput, {
-				ref: inputRef,
+				ref: appliedRef,
 				disabled,
 				onFocus: handleInputFocus,
 				onBlur: handleInputBlur,

package/dist/TooltipV2/Tooltip.js

@@ -1,7 +1,9 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
 import { useId as useId$1 } from "../hooks/useId.js";
 import { warning } from "../utils/warning.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { invariant } from "../utils/invariant.js";
 import Tooltip_module_css_default from "./Tooltip.module.css.js";
 import VisuallyHidden from "../_VisuallyHidden.js";
@@ -80,7 +82,12 @@ 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 triggerRef = useProvidedRefOrCreate(forwardedRef);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const triggerRef = useRef(null);
+	const mergedTriggerRef = useMergedRefs(triggerRef, forwardedRef);
+	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
+	const readTriggerRef = mergedRefEnabled ? triggerRef : providedOrCreatedRef;
+	const appliedTriggerRef = mergedRefEnabled ? mergedTriggerRef : providedOrCreatedRef;
 	const tooltipElRef = useRef(null);
 	const [calculatedDirection, setCalculatedDirection] = useState(direction);
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -88,9 +95,9 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 	const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
 	const openTooltip = () => {
 		try {
-			if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.hasAttribute("popover") && !tooltipElRef.current.matches(":popover-open") && !_privateDisableTooltip) {
+			if (tooltipElRef.current && readTriggerRef.current && tooltipElRef.current.hasAttribute("popover") && !tooltipElRef.current.matches(":popover-open") && !_privateDisableTooltip) {
 				const tooltip = tooltipElRef.current;
-				const trigger = triggerRef.current;
+				const trigger = readTriggerRef.current;
 				tooltip.showPopover();
 				setIsPopoverOpen(true);
 				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, {
@@ -112,7 +119,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 			openTimeoutRef.current = null;
 		}
 		try {
-			if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.hasAttribute("popover") && tooltipElRef.current.matches(":popover-open")) {
+			if (tooltipElRef.current && readTriggerRef.current && tooltipElRef.current.hasAttribute("popover") && tooltipElRef.current.matches(":popover-open")) {
 				tooltipElRef.current.hidePopover();
 				setIsPopoverOpen(false);
 			} else setIsPopoverOpen(false);
@@ -122,16 +129,16 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 	};
 	const value = useMemo(() => ({ tooltipId }), [tooltipId]);
 	useEffect(() => {
-		if (!tooltipElRef.current || !triggerRef.current) return;
-		const isTriggerInteractive = isInteractive(triggerRef.current);
-		const triggerChildren = triggerRef.current.childNodes;
+		if (!tooltipElRef.current || !readTriggerRef.current) return;
+		const isTriggerInteractive = isInteractive(readTriggerRef.current);
+		const triggerChildren = readTriggerRef.current.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 = triggerRef.current.hasAttribute("aria-label");
-			const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some((child) => child instanceof HTMLElement && child.hasAttribute("aria-label"));
+			const hasAriaLabel = readTriggerRef.current.hasAttribute("aria-label");
+			const hasAriaLabelInChildren = Array.from(readTriggerRef.current.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") {
@@ -140,7 +147,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 		tooltipElRef.current.setAttribute("popover", "auto");
 	}, [
 		tooltipElRef,
-		triggerRef,
+		readTriggerRef,
 		direction,
 		type
 	]);
@@ -157,7 +164,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 	return /*#__PURE__*/ jsx(TooltipContext.Provider, {
 		value,
 		children: /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ React.isValidElement(child) && /*#__PURE__*/ React.cloneElement(child, {
-			ref: triggerRef,
+			ref: appliedTriggerRef,
 			"aria-describedby": (() => {
 				if (type !== "description") return child.props["aria-describedby"];
 				const existingDescribedBy = child.props["aria-describedby"];

package/dist/experimental/Tabs/types.d.ts

@@ -73,7 +73,7 @@ type TabPanelProps = {
   value: string;
 };
 type TabListHookProps<T extends HTMLElement> = TabListProps & {
-  /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */ref?: React.RefObject<T>;
+  /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */ref?: React.Ref<T | null>;
 };
 type TabListHookResult<T extends HTMLElement> = {
   /** Props to be spread onto the tablist element */tabListProps: {
@@ -81,7 +81,7 @@ type TabListHookResult<T extends HTMLElement> = {
     'aria-orientation': AriaAttributes['aria-orientation'];
     'aria-label': AriaAttributes['aria-label'];
     'aria-labelledby': AriaAttributes['aria-labelledby'];
-    ref: React.RefObject<T | null>;
+    ref: React.Ref<T | null>;
     role: 'tablist';
   };
 };

package/dist/experimental/Tabs/useTabList.js

@@ -1,14 +1,22 @@
+import { useMergedRefs } from "../../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../../hooks/useProvidedRefOrCreate.js";
+import { useFeatureFlag } from "../../FeatureFlags/useFeatureFlag.js";
 import { c } from "react-compiler-runtime";
+import { useRef } from "react";
 //#region src/experimental/Tabs/useTabList.ts
 function useTabList(props) {
 	const $ = c(9);
 	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": ariaOrientation } = props;
-	const ref = useProvidedRefOrCreate(props.ref);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const tabListRef = useRef(null);
+	const mergedRef = useMergedRefs(tabListRef, props.ref);
+	const providedOrCreatedRef = useProvidedRefOrCreate(props.ref);
+	const readRef = mergedRefEnabled ? tabListRef : providedOrCreatedRef;
+	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	let t0;
-	if ($[0] !== ariaOrientation || $[1] !== ref) {
+	if ($[0] !== ariaOrientation || $[1] !== readRef) {
 		t0 = (event) => {
-			const { current: tablist } = ref;
+			const { current: tablist } = readRef;
 			if (tablist === null) return;
 			const tabs = getFocusableTabs(tablist);
 			const isVertical = ariaOrientation === "vertical";
@@ -33,25 +41,25 @@ function useTabList(props) {
 			}
 		};
 		$[0] = ariaOrientation;
-		$[1] = ref;
+		$[1] = readRef;
 		$[2] = t0;
 	} else t0 = $[2];
 	const onKeyDown = t0;
 	const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
 	let t2;
-	if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
+	if ($[3] !== appliedRef || $[4] !== ariaLabel || $[5] !== ariaLabelledby || $[6] !== onKeyDown || $[7] !== t1) {
 		t2 = { tabListProps: {
-			ref,
+			ref: appliedRef,
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			"aria-orientation": t1,
 			role: "tablist",
 			onKeyDown
 		} };
-		$[3] = ariaLabel;
-		$[4] = ariaLabelledby;
-		$[5] = onKeyDown;
-		$[6] = ref;
+		$[3] = appliedRef;
+		$[4] = ariaLabel;
+		$[5] = ariaLabelledby;
+		$[6] = onKeyDown;
 		$[7] = t1;
 		$[8] = t2;
 	} else t2 = $[8];

package/dist/experimental/index.js

@@ -4,15 +4,15 @@ import { Announce } from "../live-region/Announce.js";
 import { AriaAlert } from "../live-region/AriaAlert.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
 import { ButtonBase } from "../Button/ButtonBase.js";
+import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
+import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
 import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
 import { Dialog } from "../Dialog/Dialog.js";
-import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
-import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
-import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { Stack } from "../Stack/index.js";
 import { SkeletonBox } from "../Skeleton/SkeletonBox.js";
 import { FilteredActionListLoadingTypes } from "../FilteredActionList/constants.js";

package/dist/hooks/useMergedRefs.d.ts

@@ -17,18 +17,18 @@ import { ForwardedRef, Ref } from "react";
  * // React 18
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(forwardedRef, ref)
+ *  const mergedRef = useMergedRefs(forwardedRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * })
  *
  * @example
  * // React 19
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(externalRef, ref)
+ *  const mergedRef = useMergedRefs(externalRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * }
  */
 declare function useMergedRefs<T>(refA: Ref$1<T | null>, refB: Ref$1<T | null>): (value: T | null) => (() => void) | undefined;

package/dist/hooks/useMergedRefs.js

@@ -1,7 +1,9 @@
 import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
 import { c } from "react-compiler-runtime";
-import "react";
+import { version } from "react";
 //#region src/hooks/useMergedRefs.ts
+var _version$split$;
+const majorReactVersion = parseInt((_version$split$ = version.split(".")[0]) !== null && _version$split$ !== void 0 ? _version$split$ : "18", 10);
 /**
 * Cleanup functions for refs were introduced in React 19. For feature detection,
 * we look to see if current version of React is >= 19 or if it is an
@@ -26,18 +28,18 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
 * // React 18
 * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
 *  const ref = useRef<HTMLButtonElement>(null)
-*  const combinedRef = useMergedRefs(forwardedRef, ref)
+*  const mergedRef = useMergedRefs(forwardedRef, ref)
 *
-*  return <button ref={combinedRef} />
+*  return <button ref={mergedRef} />
 * })
 *
 * @example
 * // React 19
 * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
 *  const ref = useRef<HTMLButtonElement>(null)
-*  const combinedRef = useMergedRefs(externalRef, ref)
+*  const mergedRef = useMergedRefs(externalRef, ref)
 *
-*  return <button ref={combinedRef} />
+*  return <button ref={mergedRef} />
 * }
 */
 function useMergedRefs(refA, refB) {
@@ -48,6 +50,7 @@ function useMergedRefs(refA, refB) {
 			const cleanupA = setRef(refA, value);
 			const cleanupB = setRef(refB, value);
 			if (!supportsRefCleanup) return;
+			if (majorReactVersion <= 18) return;
 			return () => {
 				if (cleanupA) cleanupA();
 				else setRef(refA, null);

package/dist/hooks/useProvidedRefOrCreate.d.ts

@@ -9,17 +9,14 @@ import React from "react";
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
  *
- * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
- * created ref instead.
+ * @note This hook is overly restrictive in that it forces the provided ref to be a ref object rather than a callback.
+ * In particular, it should **not** be used to merge internal refs with forwarded refs. For this, use
+ * {@linkcode useMergedRefs} instead.
  *
- * ```diff
- * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
- * + const ref = useRef(null)
- * + const mergedRef = useMergedRefs(forwardedRef, ref)
- *
- * - return <div ref={ref} />
- * + return <div ref={mergedRef} />
- * ```
+ * The primary valid use case for this hook is for when the consumer is using the provided ref to point to an external
+ * element, like an externally rendered anchor. This is 'backwards' from forwarded refs with respect to data flow; the
+ * consumer is passing a reference to an external element, rather than passing a handle to obtain a reference to an
+ * internal element.
  */
 declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;
 //#endregion

package/dist/hooks/useProvidedRefOrCreate.js

@@ -8,17 +8,14 @@ import React from "react";
 * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
 * @type TRef The type of the RefObject which should be created.
 *
-* @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
-* created ref instead.
+* @note This hook is overly restrictive in that it forces the provided ref to be a ref object rather than a callback.
+* In particular, it should **not** be used to merge internal refs with forwarded refs. For this, use
+* {@linkcode useMergedRefs} instead.
 *
-* ```diff
-* - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
-* + const ref = useRef(null)
-* + const mergedRef = useMergedRefs(forwardedRef, ref)
-*
-* - return <div ref={ref} />
-* + return <div ref={mergedRef} />
-* ```
+* The primary valid use case for this hook is for when the consumer is using the provided ref to point to an external
+* element, like an externally rendered anchor. This is 'backwards' from forwarded refs with respect to data flow; the
+* consumer is passing a reference to an external element, rather than passing a handle to obtain a reference to an
+* internal element.
 */
 function useProvidedRefOrCreate(providedRef) {
 	const createdRef = React.useRef(null);

package/generated/components.json

@@ -5060,7 +5060,7 @@
         },
         {
           "id": "components-pagelayout-features--pull-request-page",
-          "code": "() => (\n  <PageLayout>\n    <PageLayout.Header>\n      <div className={classes.HeaderStack}>\n        <div>\n          <Heading as=\"h1\" className={classes.TitleHeading}>\n            Input validation styles{' '}\n            <Text className={classes.TitleSubdued}>#1831</Text>\n          </Heading>\n          <div className={classes.StatusRow}>\n            <StateLabel status=\"pullOpened\">Open</StateLabel>\n            <Text className={classes.StatusMeta}>\n              <Link href=\"#\" muted className={classes.BoldMetaLink}>\n                mperrotti\n              </Link>{' '}\n              wants to merge 3 commits into{' '}\n              <BranchName href=\"#\">main</BranchName> from{' '}\n              <BranchName href=\"#\">mp/validation-styles</BranchName>\n            </Text>\n          </div>\n        </div>\n        <TabNav>\n          <TabNav.Link href=\"#\" selected>\n            Conversation\n          </TabNav.Link>\n          <TabNav.Link href=\"#\">Commits</TabNav.Link>\n          <TabNav.Link href=\"#\">Checks</TabNav.Link>\n          <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n        </TabNav>\n      </div>\n    </PageLayout.Header>\n    <PageLayout.Content>\n      <div className={classes.ContentBox}></div>\n      <div className={classes.ScrollBox} tabIndex={0}>\n        This box has really long content. If it is too long, it will cause x\n        overflow and should show a scrollbar. When this overflows, it should not\n        break to overall page layout!\n      </div>\n    </PageLayout.Content>\n    <PageLayout.Pane aria-label=\"Side pane\">\n      <div className={classes.PaneStack}>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Assignees</Text>\n          <Text className={classes.PaneMetaText}>\n            No one –{' '}\n            <Link href=\"#\" muted>\n              assign yourself\n            </Link>\n          </Text>\n        </div>\n        <div role=\"separator\" className={classes.PaneSeparator}></div>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Labels</Text>\n          <Text className={classes.PaneMetaText}>None yet</Text>\n        </div>\n      </div>\n    </PageLayout.Pane>\n  </PageLayout>\n)"
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Header>\n      <div className={classes.HeaderStack}>\n        <div>\n          <Heading as=\"h1\" className={classes.TitleHeading}>\n            Input validation styles{' '}\n            <Text className={classes.TitleSubdued}>#1831</Text>\n          </Heading>\n          <div className={classes.StatusRow}>\n            <StateLabel status=\"pullOpened\">Open</StateLabel>\n            <Text className={classes.StatusMeta}>\n              <Link href=\"#\" muted className={classes.BoldMetaLink}>\n                mperrotti\n              </Link>{' '}\n              wants to merge 3 commits into{' '}\n              <BranchName href=\"#\">main</BranchName> from{' '}\n              <BranchName href=\"#\">mp/validation-styles</BranchName>\n            </Text>\n          </div>\n        </div>\n        <TabNav>\n          <TabNav.Link href=\"#\" selected>\n            Conversation\n          </TabNav.Link>\n          <TabNav.Link href=\"#\">Commits</TabNav.Link>\n          <TabNav.Link href=\"#\">Checks</TabNav.Link>\n          <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n        </TabNav>\n      </div>\n    </PageLayout.Header>\n    <PageLayout.Content>\n      <div className={classes.ContentBox}></div>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n      <div className={classes.ScrollBox} tabIndex={0}>\n        This box has really long content. If it is too long, it will cause x\n        overflow and should show a scrollbar. When this overflows, it should not\n        break to overall page layout!\n      </div>\n    </PageLayout.Content>\n    <PageLayout.Pane aria-label=\"Side pane\">\n      <div className={classes.PaneStack}>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Assignees</Text>\n          <Text className={classes.PaneMetaText}>\n            No one –{' '}\n            <Link href=\"#\" muted>\n              assign yourself\n            </Link>\n          </Text>\n        </div>\n        <div role=\"separator\" className={classes.PaneSeparator}></div>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Labels</Text>\n          <Text className={classes.PaneMetaText}>None yet</Text>\n        </div>\n      </div>\n    </PageLayout.Pane>\n  </PageLayout>\n)"
         },
         {
           "id": "components-pagelayout-features--sticky-pane",
@@ -5068,7 +5068,7 @@
         },
         {
           "id": "components-pagelayout-features--nested-scroll-container",
-          "code": "(args) => (\n  <div className={classes.NestedScrollContainer}>\n    <Placeholder label=\"Above scroll container\" height={120} />\n    <div className={classes.OverflowAuto}>\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Header padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Header\" height={64} />\n        </PageLayout.Header>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            {Array.from({\n              length: args.numParagraphsInContent,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Content>\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Side pane\"\n        >\n          <div className={classes.ContentGrid}>\n            {Array.from({\n              length: args.numParagraphsInPane,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Footer padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Footer\" height={64} />\n        </PageLayout.Footer>\n      </PageLayout>\n    </div>\n    <Placeholder label=\"Below scroll container\" height={120} />\n  </div>\n)"
+          "code": "(args) => (\n  <div className={classes.NestedScrollContainer}>\n    <Placeholder label=\"Above scroll container\" height={120} />\n    <div className={classes.OverflowAuto}>\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Header padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Header\" height={64} />\n        </PageLayout.Header>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            {Array.from({\n              length: args.numParagraphsInContent,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Content>\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Side pane\"\n        >\n          <div className={classes.ContentGrid}>\n            {Array.from({\n              length: args.numParagraphsInPane,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Footer padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Footer\" height={64} />\n        </PageLayout.Footer>\n      </PageLayout>\n    </div>\n    <Placeholder label=\"Below scroll container\" height={120} />\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--custom-sticky-header",
@@ -5080,7 +5080,7 @@
         },
         {
           "id": "components-pagelayout-features--scroll-container-within-page-layout-pane",
-          "code": "() => (\n  <div className={classes.NestedScrollContainer}>\n    <div className={classes.OverflowAuto}>\n      <Placeholder label=\"Above inner scroll container\" height={120} />\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Sticky pane\"\n        >\n          <div className={classes.OverflowAuto}>\n            <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n              <Placeholder label=\"Inner scroll container\" height={800} />\n            </PageLayout.Pane>\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            <Placeholder label=\"Page content\" height={1600} />\n          </div>\n        </PageLayout.Content>\n      </PageLayout>\n      <Placeholder label=\"Beneath inner scroll container\" height={120} />\n    </div>\n  </div>\n)"
+          "code": "() => (\n  <div className={classes.NestedScrollContainer}>\n    <div className={classes.OverflowAuto}>\n      <Placeholder label=\"Above inner scroll container\" height={120} />\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Sticky pane\"\n        >\n          <div className={classes.OverflowAuto}>\n            <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n              <Placeholder label=\"Inner scroll container\" height={800} />\n            </PageLayout.Pane>\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            <Placeholder label=\"Page content\" height={1600} />\n          </div>\n        </PageLayout.Content>\n      </PageLayout>\n      <Placeholder label=\"Beneath inner scroll container\" height={120} />\n    </div>\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--custom-pane-widths",
@@ -8185,11 +8185,11 @@
         },
         {
           "id": "components-timeline-features--with-actions",
-          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label\n            className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n          >\n            Verified\n          </Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.HideAtNarrow}>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceTitle}>\n              <Link href=\"#\" className={classes.CrossReferenceLink}>\n                <span className={classes.CrossReferenceName}>\n                  Fix positioning of Autocomplete overlay menu\n                </span>{' '}\n                <span className={classes.CrossReferenceNumber}>\n                  primer/react#7431\n                </span>\n              </Link>\n            </div>\n            <Octicon\n              icon={LockIcon}\n              size={16}\n              className={classes.CrossReferenceMeta}\n              aria-label=\"Private\"\n            />\n            <StateLabel status=\"pullOpened\" size=\"small\">\n              Open\n            </StateLabel>\n          </div>\n          <div className={classes.CrossReferenceTaskline}>\n            <Octicon icon={TasklistIcon} size={16} />\n            17 tasks\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label\n            className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n          >\n            Verified\n          </Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.HideAtNarrow}>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceTitle}>\n              <Link href=\"#\" className={classes.CrossReferenceLink}>\n                <span className={classes.CrossReferenceName}>\n                  Fix positioning of Autocomplete overlay menu\n                </span>{' '}\n                <span className={classes.CrossReferenceNumber}>\n                  primer/react#7431\n                </span>\n              </Link>\n            </div>\n            <Octicon\n              icon={LockIcon}\n              size={16}\n              className={classes.CrossReferenceMeta}\n              aria-label=\"Private\"\n            />\n            <StateLabel status=\"pullOpened\" size=\"small\">\n              Open\n            </StateLabel>\n          </div>\n          <div className={classes.CrossReferenceTaskline}>\n            <Octicon icon={TasklistIcon} size={16} />\n            17 tasks\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         },
         {
           "id": "components-timeline-features--with-avatar",
-          "code": "() => (\n  <div\n    className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            monalisa\n          </Link>\n          {'approved these changes '}\n          <RelativeTime date={new Date()} format=\"relative\" />\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View reviewed changes</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n  <div\n    className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            monalisa\n          </Link>\n          {'approved these changes '}\n          <RelativeTime date={new Date()} format=\"relative\" />\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View reviewed changes</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",

package/package.json

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