@primer/react 38.34.0-rc.f86dc8614 → 38.34.0

package/CHANGELOG.md

@@ -8,8 +8,14 @@
 
 ### Patch Changes
 
+- [#8211](https://github.com/primer/react/pull/8211) [`a3e669f`](https://github.com/primer/react/commit/a3e669fa551a7d07841ce20224199d172905860f) Thanks [@francinelucca](https://github.com/francinelucca)! - Link: Remove unnecessary `data-hover-color` attribute from rendered DOM element
+
+- [#8196](https://github.com/primer/react/pull/8196) [`e24effd`](https://github.com/primer/react/commit/e24effd440d69f0068a89aba26bae9e39fb3254e) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Use `aria-pressed` instead of `aria-current` on `SegmentedControl.Button` and `SegmentedControl.IconButton` so JAWS announces the selected state when a segment is activated.
+
 - [#8169](https://github.com/primer/react/pull/8169) [`1d6f559`](https://github.com/primer/react/commit/1d6f5593f5e482d1d03027522bc882560c7b1f06) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Timeline: `Timeline.Actions` now wraps onto a new row below `Timeline.Body`, left-aligned with the body content, when `Timeline.Item` is narrower than 480px.
 
+- [#8214](https://github.com/primer/react/pull/8214) [`41705f4`](https://github.com/primer/react/commit/41705f430ce0f64eb61c2665313f36a88cf6f16c) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - UnderlinePanels: The experimental `UnderlinePanels` component is now built on the experimental `Tabs` component instead of `@github/tab-container-element`. Its public API and behavior are unchanged.
+
 ## 38.33.0
 
 ### Minor Changes

package/dist/ActionList/Group.js

@@ -1,9 +1,9 @@
 import { useId as useId$1 } from "../hooks/useId.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { invariant } from "../utils/invariant.js";
 import { ListContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
-import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import Group_module_css_default from "./Group.module.css.js";
 import { GroupHeadingTrailingAction } from "./GroupHeadingTrailingAction.js";
 import { GroupContext } from "./GroupContext.js";

package/dist/ActionList/List.js

@@ -1,18 +1,19 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useId as useId$1 } from "../hooks/useId.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
 import { ActionListContainerContext } from "./ActionListContainerContext.js";
 import { ListContext } from "./shared.js";
 import { Heading } from "./Heading.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
-import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useRef } from "react";
 //#region src/ActionList/List.tsx
 const UnwrappedList = (props, forwardedRef) => {
 	var _slots$heading$props$;
@@ -60,7 +61,12 @@ const UnwrappedList = (props, forwardedRef) => {
 	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;
 	const listRole = role || listRoleFromContainer;
-	const listRef = useProvidedRefOrCreate(forwardedRef);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const listRef = useRef(null);
+	const mergedRef = useMergedRefs(listRef, 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";
 	let enableFocusZone = false;
 	if (enableFocusZoneFromContainer !== void 0) enableFocusZone = enableFocusZoneFromContainer;
@@ -79,14 +85,14 @@ const UnwrappedList = (props, forwardedRef) => {
 	const t5 = !enableFocusZone;
 	const t6 = listRole === "menu" || container === "SelectPanel" || container === "FilteredActionList" ? "wrap" : void 0;
 	let t7;
-	if ($[11] !== listRef || $[12] !== t5 || $[13] !== t6) {
+	if ($[11] !== readRef || $[12] !== t5 || $[13] !== t6) {
 		t7 = {
 			disabled: t5,
-			containerRef: listRef,
+			containerRef: readRef,
 			bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
 			focusOutBehavior: t6
 		};
-		$[11] = listRef;
+		$[11] = readRef;
 		$[12] = t5;
 		$[13] = t6;
 		$[14] = t7;
@@ -111,16 +117,16 @@ const UnwrappedList = (props, forwardedRef) => {
 	} else t9 = $[20];
 	const listContextValue = t9;
 	let t10;
-	if ($[21] !== listRef) {
+	if ($[21] !== readRef.current) {
 		t10 = () => {
-			const list = listRef.current;
+			const list = readRef.current;
 			if (!list) return;
 			const hasMixed = list.querySelector("[data-has-description=\"true\"]") !== null && list.querySelector("[data-has-description=\"false\"]") !== null;
 			const current = list.getAttribute("data-mixed-descriptions");
 			if (hasMixed && current !== "true") list.setAttribute("data-mixed-descriptions", "true");
 			else if (!hasMixed && current !== null) list.removeAttribute("data-mixed-descriptions");
 		};
-		$[21] = listRef;
+		$[21] = readRef.current;
 		$[22] = t10;
 	} else t10 = $[22];
 	useIsomorphicLayoutEffect(t10);
@@ -133,12 +139,12 @@ const UnwrappedList = (props, forwardedRef) => {
 	} else t12 = $[24];
 	const t13 = itemGapEnabled ? "" : void 0;
 	let t14;
-	if ($[25] !== Component || $[26] !== ariaLabelledBy || $[27] !== childrenWithoutSlots || $[28] !== listRef || $[29] !== listRole || $[30] !== restProps || $[31] !== showDividers || $[32] !== t12 || $[33] !== t13 || $[34] !== variant) {
+	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,
 			role: listRole,
 			"aria-labelledby": ariaLabelledBy,
-			ref: listRef,
+			ref: appliedRef,
 			"data-component": "ActionList",
 			"data-dividers": showDividers,
 			"data-variant": variant,
@@ -147,9 +153,9 @@ const UnwrappedList = (props, forwardedRef) => {
 			children: childrenWithoutSlots
 		});
 		$[25] = Component;
-		$[26] = ariaLabelledBy;
-		$[27] = childrenWithoutSlots;
-		$[28] = listRef;
+		$[26] = appliedRef;
+		$[27] = ariaLabelledBy;
+		$[28] = childrenWithoutSlots;
 		$[29] = listRole;
 		$[30] = restProps;
 		$[31] = showDividers;

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -1,12 +1,13 @@
 import { reactMajorVersion } from "../utils/environment.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
 import { useRenderForcingRef } from "../hooks/useRenderForcingRef.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { IconButton } from "../Button/IconButton.js";
 import { useFocusTrap } from "../hooks/useFocusTrap.js";
 import { useFocusZone } from "../hooks/useFocusZone.js";
-import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import Overlay from "../Overlay/Overlay.js";
 import AnchoredOverlay_module_css_default from "./AnchoredOverlay.module.css.js";
 import { widthMap } from "../Overlay/constants.js";
@@ -33,7 +34,9 @@ const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, anchorId:
 	const [anchorElement, setAnchorElement] = useState(null);
 	if (anchorRef.current !== anchorElement) setAnchorElement(anchorRef.current);
 	const [overlayRef, updateOverlayRef] = useRenderForcingRef();
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
 	const [overlayElement, setOverlayElement] = useState(null);
+	const mergedOverlayRef = useMergedRefs(updateOverlayRef, useMergedRefs(overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.ref, setOverlayElement));
 	const anchorId = useId$1(externalAnchorId);
 	const onClickOutside = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose("click-outside"), [onClose]);
 	const onEscape = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose("escape"), [onClose]);
@@ -190,10 +193,10 @@ const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, anchorId:
 		...shouldRenderAsPopover ? { popover: "manual" } : {},
 		...restOverlayProps,
 		...shouldRenderAsPopover ? { id: popoverId } : {},
-		ref: (node) => {
+		ref: mergedRefEnabled ? mergedOverlayRef : (node) => {
+			setOverlayElement(node);
 			if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) assignRef(overlayProps.ref, node);
 			updateOverlayRef(node);
-			setOverlayElement(node);
 		},
 		"data-anchor-position": cssAnchorPositioning,
 		"data-side": cssAnchorPositioning ? side : position === null || position === void 0 ? void 0 : position.anchorSide,

package/dist/Autocomplete/AutocompleteInput.js

@@ -20,9 +20,11 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
 		if (openOnFocus) setShowMenu(true);
 	};
 	const handleInputBlur = useCallback((event) => {
-		onBlur && onBlur(event);
+		onBlur === null || onBlur === void 0 || onBlur(event);
 		safeSetTimeout(() => {
-			if (document.activeElement !== inputRef.current) {
+			const nextFocusedElement = event.relatedTarget;
+			const menuElement = document.getElementById(`${id}-listbox`);
+			if (!nextFocusedElement || nextFocusedElement !== menuElement && !(menuElement !== null && menuElement !== void 0 && menuElement.contains(nextFocusedElement))) {
 				setShowMenu(false);
 				if (inputRef.current && autocompleteSuggestion && inputRef.current.value !== inputValue) inputRef.current.value = inputValue;
 			}
@@ -33,16 +35,17 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
 		inputRef,
 		safeSetTimeout,
 		autocompleteSuggestion,
-		inputValue
+		inputValue,
+		id
 	]);
 	const handleInputChange = (event) => {
-		onChange && onChange(event);
+		onChange === null || onChange === void 0 || onChange(event);
 		setInputValue(event.currentTarget.value);
 		if (!showMenu) setShowMenu(true);
 	};
 	const handleInputKeyDown = useCallback((event) => {
 		var _inputRef$current;
-		onKeyDown && onKeyDown(event);
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
 		if (event.key === "Backspace") setHighlightRemainingText(false);
 		if (event.key === "Escape" && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
 			setInputValue("");
@@ -58,11 +61,11 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
 		setShowMenu
 	]);
 	const handleInputKeyUp = useCallback((event) => {
-		onKeyUp && onKeyUp(event);
+		onKeyUp === null || onKeyUp === void 0 || onKeyUp(event);
 		if (event.key === "Backspace") setHighlightRemainingText(true);
 	}, [setHighlightRemainingText, onKeyUp]);
 	const onInputKeyPress = useCallback((event) => {
-		onKeyPress && onKeyPress(event);
+		onKeyPress === null || onKeyPress === void 0 || onKeyPress(event);
 		if (showMenu && event.key === "Enter" && activeDescendantRef.current) {
 			event.preventDefault();
 			event.nativeEvent.stopImmediatePropagation();

package/dist/ButtonGroup/ButtonGroup.js

@@ -1,10 +1,12 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
 import ButtonGroup_module_css_default from "./ButtonGroup.module.css.js";
 import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useRef } from "react";
 //#region src/ButtonGroup/ButtonGroup.tsx
 const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forwardRef) {
 	const $ = c(20);
@@ -29,6 +31,12 @@ const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forw
 		t1 = $[5];
 	}
 	const BaseComponent = t1 === void 0 ? "div" : t1;
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const buttonRef = useRef(null);
+	const mergedRef = useMergedRefs(buttonRef, forwardRef);
+	const providedOrCreatedRef = useProvidedRefOrCreate(forwardRef);
+	const readRef = mergedRefEnabled ? buttonRef : providedOrCreatedRef;
+	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	let t2;
 	if ($[6] !== children) {
 		t2 = React.Children.map(children, _temp);
@@ -36,17 +44,16 @@ const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forw
 		$[7] = t2;
 	} else t2 = $[7];
 	const buttons = t2;
-	const buttonRef = useProvidedRefOrCreate(forwardRef);
 	const t3 = role !== "toolbar";
 	let t4;
-	if ($[8] !== buttonRef || $[9] !== t3) {
+	if ($[8] !== readRef || $[9] !== t3) {
 		t4 = {
-			containerRef: buttonRef,
+			containerRef: readRef,
 			disabled: t3,
 			bindKeys: FocusKeys.ArrowHorizontal,
 			focusOutBehavior: "wrap"
 		};
-		$[8] = buttonRef;
+		$[8] = readRef;
 		$[9] = t3;
 		$[10] = t4;
 	} else t4 = $[10];
@@ -58,9 +65,9 @@ const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forw
 		$[12] = t5;
 	} else t5 = $[12];
 	let t6;
-	if ($[13] !== BaseComponent || $[14] !== buttonRef || $[15] !== buttons || $[16] !== rest || $[17] !== role || $[18] !== t5) {
+	if ($[13] !== BaseComponent || $[14] !== appliedRef || $[15] !== buttons || $[16] !== rest || $[17] !== role || $[18] !== t5) {
 		t6 = /*#__PURE__*/ jsx(BaseComponent, {
-			ref: buttonRef,
+			ref: appliedRef,
 			className: t5,
 			role,
 			...rest,
@@ -68,7 +75,7 @@ const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forw
 			children: buttons
 		});
 		$[13] = BaseComponent;
-		$[14] = buttonRef;
+		$[14] = appliedRef;
 		$[15] = buttons;
 		$[16] = rest;
 		$[17] = role;

package/dist/Checkbox/Checkbox.js

@@ -1,30 +1,37 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import shared_module_css_default from "./shared.module.css.js";
 import { CheckboxGroupContext } from "../CheckboxGroup/CheckboxGroupContext.js";
 import Checkbox_module_css_default from "./Checkbox.module.css.js";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 //#region src/Checkbox/Checkbox.tsx
 /**
 * An accessible, native checkbox component
 */
 const Checkbox = /*#__PURE__*/ React.forwardRef(({ checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ["data-component"]: dataComponent, ...rest }, ref) => {
-	const checkboxRef = useProvidedRefOrCreate(ref);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const checkboxRef = useRef(null);
+	const mergedRef = useMergedRefs(checkboxRef, ref);
+	const providedOrCreatedRef = useProvidedRefOrCreate(ref);
+	const readRef = mergedRefEnabled ? checkboxRef : providedOrCreatedRef;
+	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	const checkboxGroupContext = useContext(CheckboxGroupContext);
 	const handleOnChange = (e) => {
 		checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
 		onChange && onChange(e);
-		if (indeterminate && checkboxRef.current) {
-			checkboxRef.current.indeterminate = true;
-			checkboxRef.current.setAttribute("aria-checked", "mixed");
+		if (indeterminate && readRef.current) {
+			readRef.current.indeterminate = true;
+			readRef.current.setAttribute("aria-checked", "mixed");
 		}
 	};
 	const inputProps = {
 		type: "checkbox",
 		disabled,
-		ref: checkboxRef,
+		ref: appliedRef,
 		checked: indeterminate ? false : checked,
 		defaultChecked,
 		required,
@@ -36,14 +43,14 @@ const Checkbox = /*#__PURE__*/ React.forwardRef(({ checked, className, defaultCh
 		...rest
 	};
 	useIsomorphicLayoutEffect(() => {
-		if (checkboxRef.current) checkboxRef.current.indeterminate = indeterminate || false;
+		if (readRef.current) readRef.current.indeterminate = indeterminate || false;
 	}, [
 		indeterminate,
 		checked,
-		checkboxRef
+		readRef
 	]);
 	useEffect(() => {
-		const { current: checkbox } = checkboxRef;
+		const { current: checkbox } = readRef;
 		if (!checkbox) return;
 		if (indeterminate) checkbox.setAttribute("aria-checked", "mixed");
 		else checkbox.setAttribute("aria-checked", checkbox.checked ? "true" : "false");

package/dist/Dialog/Dialog.js

@@ -4,6 +4,7 @@ import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
 import { useResizeObserver } from "../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../hooks/useId.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
 import { useFocusTrap } from "../hooks/useFocusTrap.js";
@@ -244,22 +245,28 @@ const Footer = /*#__PURE__*/ React.forwardRef(function Footer({ className, ...re
 Footer.displayName = "Dialog.Footer";
 const Buttons = ({ buttons }) => {
 	var _buttons$find;
-	const autoFocusRef = useProvidedRefOrCreate((_buttons$find = buttons.find((button) => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const providedButtonRef = (_buttons$find = buttons.find((button) => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref;
+	const autoFocusRef = useRef(null);
+	const mergedRef = useMergedRefs(autoFocusRef, providedButtonRef);
+	const providedOrCreatedRef = useProvidedRefOrCreate(providedButtonRef);
+	const readRef = mergedRefEnabled ? autoFocusRef : providedOrCreatedRef;
+	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	let autoFocusCount = 0;
 	const [hasRendered, setHasRendered] = useState(0);
 	useEffect(() => {
 		if (hasRendered === 1) {
-			var _autoFocusRef$current;
-			(_autoFocusRef$current = autoFocusRef.current) === null || _autoFocusRef$current === void 0 || _autoFocusRef$current.focus();
+			var _readRef$current;
+			(_readRef$current = readRef.current) === null || _readRef$current === void 0 || _readRef$current.focus();
 		} else setHasRendered(hasRendered + 1);
-	}, [autoFocusRef, hasRendered]);
+	}, [readRef, hasRendered]);
 	return /*#__PURE__*/ jsx(Fragment, { children: buttons.map((dialogButtonProps, index) => {
 		const { content, buttonType = "default", autoFocus = false, ...buttonProps } = dialogButtonProps;
 		return /*#__PURE__*/ jsx(ButtonComponent, {
 			"data-component": "Dialog.FooterButton",
 			...buttonProps,
 			variant: buttonType === "normal" ? "default" : buttonType,
-			ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null,
+			ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, appliedRef) : null,
 			children: content
 		}, index);
 	}) });

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -7,7 +7,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
 	primer_react_styled_react_use_primer_theme_providers: false,
 	primer_react_action_list_group_heading_trailing_action: false,
 	primer_react_action_list_item_gap: false,
-	primer_react_timeline_list_semantics: false
+	primer_react_timeline_list_semantics: false,
+	primer_react_merged_forwarded_refs: false
 });
 //#endregion
 export { DefaultFeatureFlags };

package/dist/FilteredActionList/FilteredActionList.js

@@ -1,7 +1,9 @@
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { useFocusZone } from "../hooks/useFocusZone.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import { ActionList } from "../ActionList/index.js";
@@ -34,8 +36,17 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 	}, [onFilterChange, setInternalFilterValue]);
 	const inputAndListContainerRef = useRef(null);
 	const listRef = useRef(null);
-	const scrollContainerRef = useProvidedRefOrCreate(providedScrollContainerRef);
-	const inputRef = useProvidedRefOrCreate(providedInputRef);
+	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const scrollContainerRef = useRef(null);
+	const mergedScrollContainerRef = useMergedRefs(scrollContainerRef, providedScrollContainerRef);
+	const providedOrCreatedScrollContainerRef = useProvidedRefOrCreate(providedScrollContainerRef);
+	const readScrollContainerRef = mergedRefEnabled ? scrollContainerRef : providedOrCreatedScrollContainerRef;
+	const appliedScrollContainerRef = mergedRefEnabled ? mergedScrollContainerRef : providedOrCreatedScrollContainerRef;
+	const inputRef = useRef(null);
+	const mergedInputRef = useMergedRefs(inputRef, providedInputRef);
+	const providedOrCreatedInputRef = useProvidedRefOrCreate(providedInputRef);
+	const readInputRef = mergedRefEnabled ? inputRef : providedOrCreatedInputRef;
+	const appliedInputRef = mergedRefEnabled ? mergedInputRef : providedOrCreatedInputRef;
 	const usingRovingTabindex = _PrivateFocusManagement === "roving-tabindex";
 	const [listContainerElement, setListContainerElement] = useState(null);
 	const activeDescendantRef = useRef();
@@ -89,12 +100,12 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		onListContainerRefChanged === null || onListContainerRefChanged === void 0 || onListContainerRefChanged(node);
 	}, [onListContainerRefChanged]);
 	useEffect(() => {
-		onInputRefChanged === null || onInputRefChanged === void 0 || onInputRefChanged(inputRef);
-	}, [inputRef, onInputRefChanged]);
+		onInputRefChanged === null || onInputRefChanged === void 0 || onInputRefChanged(readInputRef);
+	}, [readInputRef, onInputRefChanged]);
 	const DEFAULT_VIRTUAL_ITEM_HEIGHT = 32;
 	const virtualizer = useVirtualizer({
 		count: items.length,
-		getScrollElement: () => scrollContainerRef.current,
+		getScrollElement: () => readScrollContainerRef.current,
 		estimateSize: () => DEFAULT_VIRTUAL_ITEM_HEIGHT,
 		overscan: 10,
 		enabled: isVirtualized,
@@ -128,7 +139,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		focusableElementFilter: (element) => {
 			return !(element instanceof HTMLInputElement);
 		},
-		activeDescendantFocus: inputRef,
+		activeDescendantFocus: readInputRef,
 		onActiveDescendantChanged: (current, previous, directlyActivated) => {
 			activeDescendantRef.current = current;
 			if (isVirtualized && current) {
@@ -136,7 +147,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 				const range = virtualizer.range;
 				if (index !== null && range && (Number(index) < range.startIndex || Number(index) >= range.endIndex)) virtualizer.scrollToIndex(Number(index), { align: "auto" });
 			}
-			if (current && scrollContainerRef.current && (directlyActivated || focusPrependedElements)) scrollIntoView(current, scrollContainerRef.current, {
+			if (current && readScrollContainerRef.current && (directlyActivated || focusPrependedElements)) scrollIntoView(current, readScrollContainerRef.current, {
 				...menuScrollMargins,
 				behavior: scrollBehavior
 			});
@@ -153,14 +164,14 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		isVirtualized
 	]);
 	useEffect(() => {
-		if (activeDescendantRef.current && scrollContainerRef.current) scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {
+		if (activeDescendantRef.current && readScrollContainerRef.current) scrollIntoView(activeDescendantRef.current, readScrollContainerRef.current, {
 			...menuScrollMargins,
 			behavior: scrollBehavior
 		});
 	}, [
 		items,
-		inputRef,
-		scrollContainerRef,
+		readInputRef,
+		readScrollContainerRef,
 		scrollBehavior
 	]);
 	useEffect(() => {
@@ -170,7 +181,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 			const list = listRef.current;
 			if (!list) return;
 			const handleFocusIn = (event) => {
-				if (event.target === inputRef.current || list.contains(event.target)) setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
+				if (event.target === readInputRef.current || list.contains(event.target)) setIsInputFocused(readInputRef.current && readInputRef.current === document.activeElement ? true : false);
 			};
 			inputAndListContainerElement.addEventListener("focusin", handleFocusIn);
 			return () => {
@@ -179,26 +190,26 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		}
 	}, [
 		items,
-		inputRef,
+		readInputRef,
 		listContainerElement,
 		usingRovingTabindex
 	]);
 	useEffect(() => {
-		if (usingRovingTabindex && !loading) setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
+		if (usingRovingTabindex && !loading) setIsInputFocused(readInputRef.current && readInputRef.current === document.activeElement ? true : false);
 	}, [
 		loading,
-		inputRef,
+		readInputRef,
 		usingRovingTabindex
 	]);
-	useAnnouncements(items, usingRovingTabindex ? listRef : { current: listContainerElement }, inputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement);
-	useScrollFlash(scrollContainerRef);
+	useAnnouncements(items, usingRovingTabindex ? listRef : { current: listContainerElement }, readInputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement);
+	useScrollFlash(readScrollContainerRef);
 	const handleSelectAllChange = useCallback((e) => {
 		if (onSelectAllChange) onSelectAllChange(e.target.checked);
 	}, [onSelectAllChange]);
 	function getBodyContent() {
-		if (loading && scrollContainerRef.current && loadingType.appearsInBody) return /*#__PURE__*/ jsx(FilteredActionListBodyLoader, {
+		if (loading && readScrollContainerRef.current && loadingType.appearsInBody) return /*#__PURE__*/ jsx(FilteredActionListBodyLoader, {
 			loadingType,
-			height: scrollContainerRef.current.clientHeight
+			height: readScrollContainerRef.current.clientHeight
 		});
 		if (message) return message;
 		let firstGroupIndex = 0;
@@ -290,7 +301,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		"data-component": "FilteredActionList",
 		children: [
 			/*#__PURE__*/ jsx(FilteredActionListInput, {
-				inputRef,
+				inputRef: appliedInputRef,
 				value: filterValue,
 				onInputChange,
 				onInputKeyPress,
@@ -324,7 +335,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 				})]
 			}),
 			/*#__PURE__*/ jsx("div", {
-				ref: scrollContainerRef,
+				ref: appliedScrollContainerRef,
 				className: FilteredActionList_module_css_default.Container,
 				children: getBodyContent()
 			})

package/dist/FilteredActionList/FilteredActionListInput.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 
 //#region src/FilteredActionList/FilteredActionListInput.d.ts
 interface FilteredActionListInputProps extends Partial<Omit<TextInputProps, 'onChange' | 'onKeyDown'>> {
-  inputRef: React.RefObject<HTMLInputElement | null>;
+  inputRef: React.Ref<HTMLInputElement | null>;
   onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onInputKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
   onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;