@primer/react 38.34.0-rc.e4bb4194f → 38.34.0-rc.f86dc8614

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;

package/dist/hooks/useMergedRefs.js

@@ -1,9 +1,7 @@
 import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
 import { c } from "react-compiler-runtime";
-import { version } from "react";
+import "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
@@ -28,18 +26,18 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
 * // 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} />
 * }
 */
 function useMergedRefs(refA, refB) {
@@ -50,7 +48,6 @@ 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,14 +9,17 @@ 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.
  *
- * @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.
+ * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+ * created ref instead.
  *
- * 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.
+ * ```diff
+ * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+ * + const ref = useRef(null)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;
 //#endregion

package/dist/hooks/useProvidedRefOrCreate.js

@@ -8,14 +8,17 @@ 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.
 *
-* @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.
+* @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+* created ref instead.
 *
-* 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.
+* ```diff
+* - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+* + const ref = useRef(null)
+* + const mergedRef = useMergedRefs(forwardedRef, ref)
+*
+* - return <div ref={ref} />
+* + return <div ref={mergedRef} />
+* ```
 */
 function useProvidedRefOrCreate(providedRef) {
 	const createdRef = React.useRef(null);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.34.0-rc.e4bb4194f",
+  "version": "38.34.0-rc.f86dc8614",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -77,6 +77,7 @@
   "dependencies": {
     "@github/mini-throttle": "^2.1.1",
     "@github/relative-time-element": "^5.0.0",
+    "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.3",