TabPanel: Add prop to allow disabling of a tab button

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 }

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();

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 = {