From d9de49078cf3ff898257ae340c752c7c2dbb3c1e Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Tue, 7 Nov 2023 22:37:49 +0100
Subject: [PATCH] update tab-panel component with tabs component

---
 .../global-styles/font-library-modal/index.js | 51 ++++++++++++-------
 .../font-library-modal/style.scss             |  4 +-
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 1128ca0811977..b4a6cd71a9a98 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -2,8 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, TabPanel } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import {
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useState, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,6 +15,9 @@ import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
 import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TABS = [
 	{
@@ -41,6 +47,7 @@ function FontLibraryModal( {
 	initialTabName = 'installed-fonts',
 } ) {
 	const { collections } = useContext( FontLibraryContext );
+	const [ selectedTab, setSelectedTab ] = useState( initialTabName );
 
 	const tabs = [
 		...DEFAULT_TABS,
@@ -54,22 +61,30 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<TabPanel
-				className="font-library-modal__tab-panel"
-				initialTabName={ initialTabName }
-				tabs={ tabs }
-			>
-				{ ( tab ) => {
-					switch ( tab.name ) {
-						case 'upload-fonts':
-							return <UploadFonts />;
-						case 'installed-fonts':
-							return <InstalledFonts />;
-						default:
-							return <FontCollection id={ tab.name } />;
-					}
-				} }
-			</TabPanel>
+			<Tabs selectedTabId={ selectedTab } onSelect={ setSelectedTab }>
+				<Tabs.TabList className="font-library-modal__tab-list">
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab
+							key={ tab.name }
+							tabId={ tab.name }
+							className={ tab.className }
+						>
+							{ tab.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId={ 'installed-fonts' }>
+					<InstalledFonts />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ 'upload-fonts' }>
+					<UploadFonts />
+				</Tabs.TabPanel>
+				{ tabsFromCollections( collections || [] ).map( ( tab ) => (
+					<Tabs.TabPanel key={ tab.name } tabId={ tab.name }>
+						<FontCollection id={ tab.name } />
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
 		</Modal>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 86cac4244dea9..329f2bbf65104 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -75,8 +75,8 @@
 	padding-bottom: 1rem;
 }
 
-.font-library-modal__tab-panel {
-	[role="tablist"] {
+.font-library-modal__tab-list {
+	&[role="tablist"] {
 		position: sticky;
 		top: 0;
 		width: calc(100% + 64px);