From 3c681f8d07345b899f700098644b13e953dbd89f Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Mon, 12 Dec 2022 10:10:10 -0800
Subject: [PATCH 01/12] Add prop to allow disabling of a tab button

---
 packages/components/src/tab-panel/index.tsx | 3 +++
 packages/components/src/tab-panel/types.ts  | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index fce688089a55c0..a55beee3dae329 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -23,6 +23,7 @@ const TabButton = ( {
 	onClick,
 	children,
 	selected,
+	disabled,
 	...rest
 }: TabButtonProps ) => (
 	<Button
@@ -31,6 +32,7 @@ const TabButton = ( {
 		aria-selected={ selected }
 		id={ tabId }
 		onClick={ onClick }
+		disabled={ disabled }
 		{ ...rest }
 	>
 		{ children }
@@ -135,6 +137,7 @@ export function TabPanel( {
 						selected={ tab.name === selected }
 						key={ tab.name }
 						onClick={ () => handleTabSelection( tab.name ) }
+						disabled={ tab.disabled }
 						label={ tab.icon && tab.title }
 						icon={ tab.icon }
 						showTooltip={ !! tab.icon }
diff --git a/packages/components/src/tab-panel/types.ts b/packages/components/src/tab-panel/types.ts
index 8cadd604563482..982c56b55342b2 100644
--- a/packages/components/src/tab-panel/types.ts
+++ b/packages/components/src/tab-panel/types.ts
@@ -32,6 +32,7 @@ export type TabButtonProps< IconProps = unknown > = {
 	selected: boolean;
 	showTooltip?: boolean;
 	tabId: string;
+	disabled?: boolean;
 };
 
 export type TabPanelProps = {

From f064cf1af7398528985c4e6769335eb5f0036698 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Mon, 12 Dec 2022 10:17:41 -0800
Subject: [PATCH 02/12] Add test for disabled property

---
 .../components/src/tab-panel/test/index.tsx   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 0d3a30e991ea3f..5cad86aad60385 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -160,6 +160,28 @@ describe( 'TabPanel', () => {
 		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 	} );
 
+	it( 'should disable the tab when `disabled` is true', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					...TABS,
+					{
+						name: 'delta',
+						title: 'Delta',
+						className: 'delta-class',
+						disabled: true,
+					},
+				] }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toBeDisabled();
+	} );
+
 	describe( 'fallbacks when new tab list invalidates current selection', () => {
 		it( 'should select `initialTabName` if defined', async () => {
 			const user = setupUser();

From 3b0ea90b1014388662a069b25f112639bf797da4 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 11:41:27 -0800
Subject: [PATCH 03/12] Add types to tabs and pick into button

---
 packages/components/src/tab-panel/types.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tab-panel/types.ts b/packages/components/src/tab-panel/types.ts
index 982c56b55342b2..7528ca99d05d25 100644
--- a/packages/components/src/tab-panel/types.ts
+++ b/packages/components/src/tab-panel/types.ts
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { IconType } from '../icon';
 
-type Tab = {
+type Tab< IconProps = unknown > = {
 	/**
 	 * The key of the tab.
 	 */
@@ -21,19 +21,24 @@ type Tab = {
 	 * The class name to apply to the tab button.
 	 */
 	className?: string;
+	/**
+	 * The icon used for the tab button.
+	 */
+	icon?: IconType< IconProps >;
+	/**
+	 * Determines if the tab button should be disabled.
+	 */
+	disabled?: boolean;
 } & Record< any, any >;
 
 export type TabButtonProps< IconProps = unknown > = {
 	children: ReactNode;
-	className?: string;
-	icon?: IconType< IconProps >;
 	label?: string;
 	onClick: ( event: MouseEvent ) => void;
 	selected: boolean;
 	showTooltip?: boolean;
 	tabId: string;
-	disabled?: boolean;
-};
+} & Pick< Tab< IconProps >, 'className' | 'icon' | 'disabled' >;
 
 export type TabPanelProps = {
 	/**

From c92b370cbcf963a5ba58efda28ca20e7d1650d44 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 11:44:00 -0800
Subject: [PATCH 04/12] Simplify remaining props to TabButton

---
 packages/components/src/tab-panel/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index a55beee3dae329..58999c3c37fb86 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -20,10 +20,8 @@ import type { WordPressComponentProps } from '../ui/context';
 
 const TabButton = ( {
 	tabId,
-	onClick,
 	children,
 	selected,
-	disabled,
 	...rest
 }: TabButtonProps ) => (
 	<Button
@@ -31,8 +29,6 @@ const TabButton = ( {
 		tabIndex={ selected ? null : -1 }
 		aria-selected={ selected }
 		id={ tabId }
-		onClick={ onClick }
-		disabled={ disabled }
 		{ ...rest }
 	>
 		{ children }

From 7177831f52927e05606269a9113ed7d41348fd15 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 11:52:00 -0800
Subject: [PATCH 05/12] Add disabled tab story

---
 .../src/tab-panel/stories/index.tsx           | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/components/src/tab-panel/stories/index.tsx b/packages/components/src/tab-panel/stories/index.tsx
index 0088f79d7b5d65..6a1f710c0bcb45 100644
--- a/packages/components/src/tab-panel/stories/index.tsx
+++ b/packages/components/src/tab-panel/stories/index.tsx
@@ -35,3 +35,23 @@ Default.args = {
 		},
 	],
 };
+
+export const DisabledTab = Template.bind( {} );
+DisabledTab.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+			disabled: true,
+		},
+	],
+};

From 529683594274bbbb9cb6682a4bd5e91b507f698d Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 12:02:01 -0800
Subject: [PATCH 06/12] Add logic around setting active tab when tab is
 disabled

---
 packages/components/src/tab-panel/index.tsx   | 21 ++++++++++++++++---
 .../src/tab-panel/stories/index.tsx           |  2 +-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index 58999c3c37fb86..646565df726ea8 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -104,10 +104,25 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		if ( ! selectedTab?.name && tabs.length > 0 ) {
-			handleTabSelection( initialTabName || tabs[ 0 ].name );
+		const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
+		const initialTab = tabs.find( ( tab ) => tab.name === initialTabName );
+		if ( ! selectedTab?.name && firstEnabledTab ) {
+			handleTabSelection(
+				initialTab && ! initialTab.disabled
+					? initialTab.name
+					: firstEnabledTab.name
+			);
 		}
-	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
+		if ( selectedTab?.disabled && firstEnabledTab ) {
+			handleTabSelection( firstEnabledTab.name );
+		}
+	}, [
+		tabs,
+		selectedTab?.name,
+		selectedTab?.disabled,
+		initialTabName,
+		handleTabSelection,
+	] );
 
 	return (
 		<div className={ className }>
diff --git a/packages/components/src/tab-panel/stories/index.tsx b/packages/components/src/tab-panel/stories/index.tsx
index 6a1f710c0bcb45..7846fe0bdbff29 100644
--- a/packages/components/src/tab-panel/stories/index.tsx
+++ b/packages/components/src/tab-panel/stories/index.tsx
@@ -43,6 +43,7 @@ DisabledTab.args = {
 		{
 			name: 'tab1',
 			title: 'Tab 1',
+			disabled: true,
 		},
 		{
 			name: 'tab2',
@@ -51,7 +52,6 @@ DisabledTab.args = {
 		{
 			name: 'tab3',
 			title: 'Tab 3',
-			disabled: true,
 		},
 	],
 };

From 662bfd7d97e099bf7de425b8a887f35ced0166a4 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 12:04:16 -0800
Subject: [PATCH 07/12] Add experimental focusable prop to button

---
 packages/components/src/tab-panel/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index 646565df726ea8..91236b9425d8aa 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -29,6 +29,7 @@ const TabButton = ( {
 		tabIndex={ selected ? null : -1 }
 		aria-selected={ selected }
 		id={ tabId }
+		__experimentalIsFocusable
 		{ ...rest }
 	>
 		{ children }

From 46fc6b360a05ebed2e0187eace4560045948b83f Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 12:20:53 -0800
Subject: [PATCH 08/12] Add tests around tab selection when disabled

---
 .../components/src/tab-panel/test/index.tsx   | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 5cad86aad60385..1ba393d72ccd3b 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -179,7 +179,66 @@ describe( 'TabPanel', () => {
 			/>
 		);
 
-		expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toBeDisabled();
+		expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+	} );
+
+	it( 'should select the first enabled tab when the inital tab is disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					{
+						name: 'alpha',
+						title: 'Alpha',
+						className: 'alpha-class',
+						disabled: true,
+					},
+					{
+						name: 'beta',
+						title: 'Beta',
+						className: 'beta-class',
+					},
+				] }
+				initialTabName="alpha"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
+	it( 'should select the first enabled tab when the currently selected becomes disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		const { rerender } = render(
+			<TabPanel
+				tabs={ TABS }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
+
+		rerender(
+			<TabPanel
+				tabs={ TABS.map( ( tab ) => {
+					if ( tab.name === 'alpha' ) {
+						return { ...tab, disabled: true };
+					}
+					return tab;
+				} ) }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
 	} );
 
 	describe( 'fallbacks when new tab list invalidates current selection', () => {

From 12953d0e113850ebcbf74622d963b267e0c405f1 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 12:26:12 -0800
Subject: [PATCH 09/12] Add expectation around disabled selection via keyboard
 navigation

---
 packages/components/src/tab-panel/test/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 1ba393d72ccd3b..a9e399de9d8a99 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -160,7 +160,8 @@ describe( 'TabPanel', () => {
 		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 	} );
 
-	it( 'should disable the tab when `disabled` is true', () => {
+	it( 'should disable the tab when `disabled` is true', async () => {
+		const user = setupUser();
 		const mockOnSelect = jest.fn();
 
 		render(
@@ -183,6 +184,13 @@ describe( 'TabPanel', () => {
 			'aria-disabled',
 			'true'
 		);
+
+		// onSelect gets called on the initial render.
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+		// onSelect should not be called since the disabled tab is highlighted, but not selected.
+		await user.keyboard( '[ArrowLeft]' );
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'should select the first enabled tab when the inital tab is disabled', () => {

From 66091754995f286d8e6fd688bd88ab6c19643a5a Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Wed, 14 Dec 2022 12:27:48 -0800
Subject: [PATCH 10/12] Add changelog entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 21d968568374b4..9eed4f0765e1fb 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### New Feature
 
 -   `TabPanel`: support manual tab activation ([#46004](https://github.com/WordPress/gutenberg/pull/46004)).
+-   `TabPanel`: support disabled prop for tab buttons ([#46471](https://github.com/WordPress/gutenberg/pull/46471)).
 -   `BaseControl`: Add `useBaseControlProps` hook to help generate id-releated props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
 
 ### Bug Fix

From b99186265db8aa73bf81b7bc9d80535d282e968b Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Thu, 29 Dec 2022 13:36:42 -0800
Subject: [PATCH 11/12] Update TabPanel readme

---
 packages/components/src/tab-panel/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/tab-panel/README.md b/packages/components/src/tab-panel/README.md
index 860bd9604b2d86..67b00c37679eca 100644
--- a/packages/components/src/tab-panel/README.md
+++ b/packages/components/src/tab-panel/README.md
@@ -121,6 +121,7 @@ An array of objects containing the following properties:
 -   `title`:`(string)` Defines the translated text for the tab.
 -   `className`:`(string)` Optional. Defines the class to put on the tab.
 -   `icon`:`(ReactNode)` Optional. When set, displays the icon in place of the tab title. The title is then rendered as an aria-label and tooltip.
+-   `disabled`:`(boolean)` Optional. Determines if the tab should be disabled or selectable.
 
 > > **Note:** Other fields may be added to the object and accessed from the child function if desired.
 

From c64730cc15148882be85a50c5536de3261138152 Mon Sep 17 00:00:00 2001
From: Joshua Flowers <joshuatf@gmail.com>
Date: Mon, 2 Jan 2023 11:08:09 -0800
Subject: [PATCH 12/12] Update handle selection logic to use else if

---
 packages/components/src/tab-panel/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index 91236b9425d8aa..ff194b76a1179c 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -113,8 +113,7 @@ export function TabPanel( {
 					? initialTab.name
 					: firstEnabledTab.name
 			);
-		}
-		if ( selectedTab?.disabled && firstEnabledTab ) {
+		} else if ( selectedTab?.disabled && firstEnabledTab ) {
 			handleTabSelection( firstEnabledTab.name );
 		}
 	}, [