Add new prop selectedTabName to TabPanel

WordPress · Dec 23, 2022 · 6aaf5f1 · 6aaf5f1
1 parent 7c2f34d
commit 6aaf5f1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
@@ -78,6 +78,7 @@ export function TabPanel( {
 	tabs,
 	selectOnMove = true,
 	initialTabName,
+	selectedTabName,
 	orientation = 'horizontal',
 	activeClass = 'is-active',
 	onSelect,
@@ -110,6 +111,12 @@ export function TabPanel( {
 		}
 	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
 
+	useEffect( () => {
+		if ( selectedTabName ) {
+			setSelected( selectedTabName );
+		}
+	}, [ selectedTabName ] );
+
 	return (
 		<div className={ className }>
 			<NavigableMenu

diff --git a/packages/components/src/tab-panel/types.ts b/packages/components/src/tab-panel/types.ts
@@ -55,6 +55,10 @@ export type TabPanelProps = {
 	 * If this prop is not set, the first tab will be selected by default.
 	 */
 	initialTabName?: string;
+	/**
+	 * The name of the tab to be selected.
+	 */
+	selectedTabName?: string;
 	/**
 	 * The function called when a tab has been selected.
 	 * It is passed the `tabName` as an argument.