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

package/CHANGELOG.md

@@ -12,6 +12,8 @@
 
 - [#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/experimental/Tabs/Tabs.js

@@ -13,10 +13,11 @@ 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$defaultValue;
+	var _props$id, _props$defaultValue;
 	const $ = c(13);
 	const { children, onValueChange } = props;
-	const groupId = useId();
+	const generatedId = useId();
+	const groupId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
 	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,7 +45,14 @@ type UncontrolledTabsProps = {
     value: string;
   }) => void;
 };
-type TabsProps = PropsWithChildren<ControlledTabsProps | UncontrolledTabsProps>;
+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 Label = {
   'aria-label': string;
 };

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -3,15 +3,16 @@ 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
@@ -21,27 +22,43 @@ 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] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps] = 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, { id: `${parentId}-tab-${tabIndex++}` });
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { "aria-labelledby": `${parentId}-tab-${panelIndex++}` });
+			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++}` });
 			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)) tabs.push(child);
-			else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
+			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);
 		}
 		return [
 			tabs,
 			tabPanels,
-			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon)
+			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon),
+			selectedFromProps
 		];
-	}, [children, parentId]);
+	}, [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
+	});
 	const contextValue = useMemo(() => ({
 		iconsVisible,
 		loadingCounters
@@ -68,55 +85,65 @@ 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(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] })
+		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]
+		})
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
+const TabImpl = ({ onSelect, value, ...itemProps }) => {
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	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]);
+	const { tabProps } = useTab({ value: value !== null && value !== void 0 ? value : "" });
+	const { onKeyDown: tabOnKeyDown, onMouseDown: tabOnMouseDown, onFocus: tabOnFocus, ...restTabProps } = tabProps;
 	return /*#__PURE__*/ jsx(UnderlineItem, {
 		as: "button",
-		role: "tab",
-		tabIndex: ariaSelected ? 0 : -1,
-		"aria-selected": ariaSelected,
+		...itemProps,
+		...restTabProps,
 		type: "button",
-		onClick: clickHandler,
-		onKeyDown: keyDownHandler,
-		loadingCounters,
-		...props
+		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
 	});
 };
 TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const Panel = ({ children, ...rest }) => {
+const PanelImpl = ({ children, value, ...panelRest }) => {
+	const { tabPanelProps } = useTabPanel({ value: value !== null && value !== void 0 ? value : "" });
 	return /*#__PURE__*/ jsx("div", {
-		role: "tabpanel",
-		...rest,
+		...panelRest,
+		...tabPanelProps,
 		children
 	});
 };
-Panel.displayName = "Panel";
+PanelImpl.displayName = "PanelImpl";
+PanelImpl.displayName = "UnderlinePanels.Panel";
+const Panel = PanelImpl;
 Panel.displayName = "UnderlinePanels.Panel";
 var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 	Panel,

package/dist/experimental/index.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.34.0-rc.d17f87af7",
+  "version": "38.34.0-rc.dad320815",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -77,7 +77,6 @@
   "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",