@primer/react 38.34.0-rc.6e2d5aac5 → 38.34.0-rc.8fa435aeb

package/dist/PageHeader/PageHeader.js

@@ -1,8 +1,6 @@
-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";
@@ -12,7 +10,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, useRef } from "react";
+import React, { useEffect } from "react";
 import { ArrowLeftIcon } from "@primer/octicons-react";
 //#region src/PageHeader/PageHeader.tsx
 const hiddenOnRegularAndWide = {
@@ -29,12 +27,7 @@ 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 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 rootRef = useProvidedRefOrCreate(forwardedRef);
 	const hoistChildState = (nodes) => {
 		const result = { hasNavigation: false };
 		for (const child of React.Children.toArray(nodes)) {
@@ -61,12 +54,12 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const isInteractive = _temp;
 	let t2;
 	let t3;
-	if ($[0] !== children || $[1] !== readRef) {
+	if ($[0] !== children || $[1] !== rootRef) {
 		t2 = function validateInteractiveElementsInTitle() {
 			let hasContextArea = false;
 			let hasLeadingAction = false;
-			if (!readRef.current || readRef.current.children.length <= 0) return;
-			const titleArea = Array.from(readRef.current.children).find(_temp2);
+			if (!rootRef.current || rootRef.current.children.length <= 0) return;
+			const titleArea = Array.from(rootRef.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;
@@ -74,9 +67,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, readRef];
+		t3 = [children, rootRef];
 		$[0] = children;
-		$[1] = readRef;
+		$[1] = rootRef;
 		$[2] = t2;
 		$[3] = t3;
 	} else {
@@ -96,9 +89,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] !== appliedRef || $[8] !== ariaLabel || $[9] !== children || $[10] !== role || $[11] !== t4 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
+	if ($[6] !== BaseComponent || $[7] !== ariaLabel || $[8] !== children || $[9] !== role || $[10] !== rootRef || $[11] !== t4 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
 		t10 = /*#__PURE__*/ jsx(BaseComponent, {
-			ref: appliedRef,
+			ref: rootRef,
 			className: t4,
 			"data-component": t5,
 			"data-has-border": t6,
@@ -110,10 +103,10 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 			children
 		});
 		$[6] = BaseComponent;
-		$[7] = appliedRef;
-		$[8] = ariaLabel;
-		$[9] = children;
-		$[10] = role;
+		$[7] = ariaLabel;
+		$[8] = children;
+		$[9] = role;
+		$[10] = rootRef;
 		$[11] = t4;
 		$[12] = t6;
 		$[13] = t7;
@@ -302,9 +295,7 @@ 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 mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
-	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
-	const appliedRef = mergedRefEnabled ? forwardedRef : providedOrCreatedRef;
+	const titleAreaRef = useProvidedRefOrCreate(forwardedRef);
 	let t3;
 	if ($[0] !== className) {
 		t3 = clsx(PageHeader_module_css_default.TitleArea, className);
@@ -324,20 +315,20 @@ const TitleArea = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 		$[5] = t5;
 	} else t5 = $[5];
 	let t6;
-	if ($[6] !== appliedRef || $[7] !== children || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
+	if ($[6] !== children || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== titleAreaRef) {
 		t6 = /*#__PURE__*/ jsx("div", {
 			className: t3,
-			ref: appliedRef,
+			ref: titleAreaRef,
 			"data-component": "TitleArea",
 			...t4,
 			...t5,
 			children
 		});
-		$[6] = appliedRef;
-		$[7] = children;
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
+		$[6] = children;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = titleAreaRef;
 		$[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,7 +1,5 @@
-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";
@@ -13,19 +11,14 @@ 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, useRef, useState } from "react";
+import React, { useCallback, useId, 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 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 inputRef = useProvidedRefOrCreate(ref);
 	const isControlled = value !== void 0;
 	const [uncontrolledLength, setUncontrolledLength] = useState(() => defaultValue !== void 0 ? String(defaultValue).length : 0);
 	const currentLength = isControlled ? String(value).length : uncontrolledLength;
@@ -36,9 +29,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 !== readRef.current || !isSegmentedInputType) {
-			var _readRef$current;
-			(_readRef$current = readRef.current) === null || _readRef$current === void 0 || _readRef$current.focus();
+		if (e.target !== inputRef.current || !isSegmentedInputType) {
+			var _inputRef$current;
+			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
 		}
 	};
 	const leadingVisualId = useId();
@@ -95,7 +88,7 @@ const TextInput = /*#__PURE__*/ React.forwardRef(({ icon: IconComponent, leading
 				children: typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual) ? /*#__PURE__*/ jsx(LeadingVisual, {}) : LeadingVisual
 			}),
 			/*#__PURE__*/ jsx(UnstyledTextInput, {
-				ref: appliedRef,
+				ref: inputRef,
 				disabled,
 				onFocus: handleInputFocus,
 				onBlur: handleInputBlur,

package/dist/TooltipV2/Tooltip.js

@@ -1,9 +1,7 @@
-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";
@@ -82,12 +80,7 @@ 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 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 triggerRef = useProvidedRefOrCreate(forwardedRef);
 	const tooltipElRef = useRef(null);
 	const [calculatedDirection, setCalculatedDirection] = useState(direction);
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -95,9 +88,9 @@ 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 && triggerRef.current && tooltipElRef.current.hasAttribute("popover") && !tooltipElRef.current.matches(":popover-open") && !_privateDisableTooltip) {
 				const tooltip = tooltipElRef.current;
-				const trigger = readTriggerRef.current;
+				const trigger = triggerRef.current;
 				tooltip.showPopover();
 				setIsPopoverOpen(true);
 				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, {
@@ -119,7 +112,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 			openTimeoutRef.current = null;
 		}
 		try {
-			if (tooltipElRef.current && readTriggerRef.current && tooltipElRef.current.hasAttribute("popover") && tooltipElRef.current.matches(":popover-open")) {
+			if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.hasAttribute("popover") && tooltipElRef.current.matches(":popover-open")) {
 				tooltipElRef.current.hidePopover();
 				setIsPopoverOpen(false);
 			} else setIsPopoverOpen(false);
@@ -129,16 +122,16 @@ 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;
+		if (!tooltipElRef.current || !triggerRef.current) return;
+		const isTriggerInteractive = isInteractive(triggerRef.current);
+		const triggerChildren = triggerRef.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 = readTriggerRef.current.hasAttribute("aria-label");
-			const hasAriaLabelInChildren = Array.from(readTriggerRef.current.childNodes).some((child) => child instanceof HTMLElement && child.hasAttribute("aria-label"));
+			const hasAriaLabel = triggerRef.current.hasAttribute("aria-label");
+			const hasAriaLabelInChildren = Array.from(triggerRef.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") {
@@ -147,7 +140,7 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 		tooltipElRef.current.setAttribute("popover", "auto");
 	}, [
 		tooltipElRef,
-		readTriggerRef,
+		triggerRef,
 		direction,
 		type
 	]);
@@ -164,7 +157,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: appliedTriggerRef,
+			ref: triggerRef,
 			"aria-describedby": (() => {
 				if (type !== "description") return child.props["aria-describedby"];
 				const existingDescribedBy = child.props["aria-describedby"];

package/dist/experimental/Tabs/Tabs.js

@@ -13,11 +13,10 @@ import React, { useId } from "react";
 * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
 */
 function Tabs(props) {
-	var _props$id, _props$defaultValue;
+	var _props$defaultValue;
 	const $ = c(13);
 	const { children, onValueChange } = props;
-	const generatedId = useId();
-	const groupId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
+	const groupId = useId();
 	const t0 = (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : props.value;
 	let t1;
 	if ($[0] !== props.value || $[1] !== t0) {

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

@@ -45,14 +45,7 @@ type UncontrolledTabsProps = {
     value: string;
   }) => void;
 };
-type CommonTabsProps = {
-  /**
-   * Optional id used as the base for generated tab and panel ids. If omitted, a
-   * unique id is generated automatically.
-   */
-  id?: string;
-};
-type TabsProps = PropsWithChildren<(ControlledTabsProps | UncontrolledTabsProps) & CommonTabsProps>;
+type TabsProps = PropsWithChildren<ControlledTabsProps | UncontrolledTabsProps>;
 type Label = {
   'aria-label': string;
 };
@@ -80,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.Ref<T | null>;
+  /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */ref?: React.RefObject<T>;
 };
 type TabListHookResult<T extends HTMLElement> = {
   /** Props to be spread onto the tablist element */tabListProps: {
@@ -88,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.Ref<T | null>;
+    ref: React.RefObject<T | null>;
     role: 'tablist';
   };
 };

package/dist/experimental/Tabs/useTabList.js

@@ -1,22 +1,14 @@
-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 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;
+	const ref = useProvidedRefOrCreate(props.ref);
 	let t0;
-	if ($[0] !== ariaOrientation || $[1] !== readRef) {
+	if ($[0] !== ariaOrientation || $[1] !== ref) {
 		t0 = (event) => {
-			const { current: tablist } = readRef;
+			const { current: tablist } = ref;
 			if (tablist === null) return;
 			const tabs = getFocusableTabs(tablist);
 			const isVertical = ariaOrientation === "vertical";
@@ -41,25 +33,25 @@ function useTabList(props) {
 			}
 		};
 		$[0] = ariaOrientation;
-		$[1] = readRef;
+		$[1] = ref;
 		$[2] = t0;
 	} else t0 = $[2];
 	const onKeyDown = t0;
 	const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
 	let t2;
-	if ($[3] !== appliedRef || $[4] !== ariaLabel || $[5] !== ariaLabelledby || $[6] !== onKeyDown || $[7] !== t1) {
+	if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
 		t2 = { tabListProps: {
-			ref: appliedRef,
+			ref,
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			"aria-orientation": t1,
 			role: "tablist",
 			onKeyDown
 		} };
-		$[3] = appliedRef;
-		$[4] = ariaLabel;
-		$[5] = ariaLabelledby;
-		$[6] = onKeyDown;
+		$[3] = ariaLabel;
+		$[4] = ariaLabelledby;
+		$[5] = onKeyDown;
+		$[6] = ref;
 		$[7] = t1;
 		$[8] = t2;
 	} else t2 = $[8];

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -3,16 +3,15 @@ import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
 import { isSlot } from "../../utils/is-slot.js";
 import { invariant } from "../../utils/invariant.js";
+import { createComponent } from "../../utils/create-component.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
-import { useTab } from "../Tabs/useTab.js";
-import { useTabList } from "../Tabs/useTabList.js";
-import { useTabPanel } from "../Tabs/useTabPanel.js";
-import { Tabs } from "../Tabs/Tabs.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
+import { TabContainerElement } from "@github/tab-container-element";
 //#region src/experimental/UnderlinePanels/UnderlinePanels.tsx
+const TabContainerComponent = createComponent(TabContainerElement, "tab-container");
 const UnderlinePanelsContext = /*#__PURE__*/ createContext({
 	iconsVisible: true,
 	loadingCounters: void 0
@@ -22,43 +21,27 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { value: `${tabIndex++}` });
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { value: `${panelIndex++}` });
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { id: `${parentId}-tab-${tabIndex++}` });
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { "aria-labelledby": `${parentId}-tab-${panelIndex++}` });
 			return child;
 		});
 		const tabs = [];
 		const tabPanels = [];
-		let selectedFromProps;
 		for (const child of Children.toArray(childrenWithProps)) {
 			if (!/*#__PURE__*/ isValidElement(child)) continue;
-			if (child.type === Tab || isSlot(child, Tab)) {
-				const ariaSelected = child.props["aria-selected"];
-				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = `${tabs.length}`;
-				tabs.push(child);
-			} else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
+			if (child.type === Tab || isSlot(child, Tab)) tabs.push(child);
+			else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
 		}
 		return [
 			tabs,
 			tabPanels,
-			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon),
-			selectedFromProps
+			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon)
 		];
-	}, [children]);
-	const [selectedValue, setSelectedValue] = useState(() => selectedFromProps !== null && selectedFromProps !== void 0 ? selectedFromProps : "0");
-	const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps);
-	if (selectedFromProps !== prevSelectedFromProps) {
-		setPrevSelectedFromProps(selectedFromProps);
-		if (selectedFromProps !== void 0 && selectedFromProps !== selectedValue) setSelectedValue(selectedFromProps);
-	}
-	const { tabListProps } = useTabList({
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		ref: listRef
-	});
+	}, [children, parentId]);
 	const contextValue = useMemo(() => ({
 		iconsVisible,
 		loadingCounters
@@ -85,65 +68,55 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
-		children: /*#__PURE__*/ jsxs(Tabs, {
-			id: parentId,
-			value: selectedValue,
-			onValueChange: ({ value }) => setSelectedValue(value),
-			children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
-				ref: wrapperRef,
-				"data-icons-visible": iconsVisible,
-				className: clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper),
-				...props,
-				children: /*#__PURE__*/ jsx(UnderlineItemList, {
-					ref: listRef,
-					role: tabListProps.role,
-					"aria-label": tabListProps["aria-label"],
-					"aria-labelledby": tabListProps["aria-labelledby"],
-					"aria-orientation": tabListProps["aria-orientation"],
-					onKeyDown: tabListProps.onKeyDown,
-					children: tabs
-				})
-			}), tabPanels]
-		})
+		children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
+			ref: wrapperRef,
+			slot: "tablist-wrapper",
+			"data-icons-visible": iconsVisible,
+			className: clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper),
+			...props,
+			children: /*#__PURE__*/ jsx(UnderlineItemList, {
+				ref: listRef,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				role: "tablist",
+				children: tabs
+			})
+		}), tabPanels] })
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = ({ onSelect, value, ...itemProps }) => {
+const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	const { tabProps } = useTab({ value: value !== null && value !== void 0 ? value : "" });
-	const { onKeyDown: tabOnKeyDown, onMouseDown: tabOnMouseDown, onFocus: tabOnFocus, ...restTabProps } = tabProps;
+	const clickHandler = React.useCallback((event) => {
+		if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+	}, [onSelect]);
+	const keyDownHandler = React.useCallback((event) => {
+		if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+	}, [onSelect]);
 	return /*#__PURE__*/ jsx(UnderlineItem, {
 		as: "button",
-		...itemProps,
-		...restTabProps,
+		role: "tab",
+		tabIndex: ariaSelected ? 0 : -1,
+		"aria-selected": ariaSelected,
 		type: "button",
-		onClick: (event) => {
-			if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		},
-		onKeyDown: (event) => {
-			tabOnKeyDown === null || tabOnKeyDown === void 0 || tabOnKeyDown(event);
-			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		},
-		onMouseDown: tabOnMouseDown,
-		onFocus: tabOnFocus,
-		loadingCounters
+		onClick: clickHandler,
+		onKeyDown: keyDownHandler,
+		loadingCounters,
+		...props
 	});
 };
 TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const PanelImpl = ({ children, value, ...panelRest }) => {
-	const { tabPanelProps } = useTabPanel({ value: value !== null && value !== void 0 ? value : "" });
+const Panel = ({ children, ...rest }) => {
 	return /*#__PURE__*/ jsx("div", {
-		...panelRest,
-		...tabPanelProps,
+		role: "tabpanel",
+		...rest,
 		children
 	});
 };
-PanelImpl.displayName = "PanelImpl";
-PanelImpl.displayName = "UnderlinePanels.Panel";
-const Panel = PanelImpl;
+Panel.displayName = "Panel";
 Panel.displayName = "UnderlinePanels.Panel";
 var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 	Panel,

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";
@@ -30,12 +30,12 @@ import { Table } from "../DataTable/index.js";
 import { InlineMessage } from "../InlineMessage/InlineMessage.js";
 import { Hidden } from "../Hidden/Hidden.js";
 import { SelectPanel } from "./SelectPanel2/SelectPanel.js";
+import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
+import { IssueLabel } from "./IssueLabel/IssueLabel.js";
 import { useTab } from "./Tabs/useTab.js";
 import { useTabList } from "./Tabs/useTabList.js";
 import { useTabPanel } from "./Tabs/useTabPanel.js";
 import { Tabs } from "./Tabs/Tabs.js";
-import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
-import { IssueLabel } from "./IssueLabel/IssueLabel.js";
 import { TopicTag } from "../TopicTag/index.js";
 //#region src/experimental/index.ts
 /**

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 mergedRef = useMergedRefs(forwardedRef, ref)
+ *  const combinedRef = useMergedRefs(forwardedRef, ref)
  *
- *  return <button ref={mergedRef} />
+ *  return <button ref={combinedRef} />
  * })
  *
  * @example
  * // React 19
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const mergedRef = useMergedRefs(externalRef, ref)
+ *  const combinedRef = useMergedRefs(externalRef, ref)
  *
- *  return <button ref={mergedRef} />
+ *  return <button ref={combinedRef} />
  * }
  */
 declare function useMergedRefs<T>(refA: Ref$1<T | null>, refB: Ref$1<T | null>): (value: T | null) => (() => void) | undefined;