From 89a959f518a809c8223e4243bef7ea6d9c042a89 Mon Sep 17 00:00:00 2001
From: Samuel Gendre <sgendre@talend.com>
Date: Tue, 10 Oct 2023 15:22:33 +0200
Subject: [PATCH] impl

---
 .../UIForm/fieldsets/Tabs/Tabs.component.js   | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
index 86c65244bdd..1e853691044 100644
--- a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
+++ b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
-import TabBar from '@talend/react-components/lib/TabBar';
-import classNames from 'classnames';
+import { Tabs } from '@talend/design-system';
 import { useTranslation } from 'react-i18next';
 
 import Widget from '../../Widget';
@@ -9,42 +7,43 @@ import { isValid } from '../../utils/validation';
 import theme from './Tabs.module.scss';
 import { I18N_DOMAIN_FORMS } from '../../../constants';
 
-function Tabs(props) {
-	const [selectedKey, setSelectedKey] = useState(0);
+function TabsAdapter(props) {
+	const { schema, ...restProps } = props;
+
 	const { t } = useTranslation(I18N_DOMAIN_FORMS);
 
-	const { schema, ...restProps } = props;
 	const tabs = schema.items.map((item, index) => {
 		const tabIsValid = isValid(item, restProps.errors);
 		return {
 			key: index,
-			label: item.title,
-			className: classNames({ [theme['has-error']]: !tabIsValid }),
-			'aria-label': tabIsValid
-				? undefined
-				: `${item.title} (${t('TF_TABS_HAS_ERRORS', { defaultValue: 'has errors' })})`,
-			children: (
+			tabTitle: {
+				title: item.title,
+				id: `${restProps.id}-tabs-${index}`,
+			},
+			tabContent: tabIsValid ? (
 				<Widget
 					{...restProps}
 					schema={{ widget: 'fieldset', ...item, options: { ...item.options, hideTitle: true } }}
 				/>
+			) : (
+				<div
+					className={theme['has-error']}
+					aria-label={`${item.title} (${t('TF_TABS_HAS_ERRORS', { defaultValue: 'has errors' })})`}
+				>
+					<Widget
+						{...restProps}
+						schema={{ widget: 'fieldset', ...item, options: { ...item.options, hideTitle: true } }}
+					/>
+				</div>
 			),
 		};
 	});
 
-	return (
-		<TabBar
-			className={classNames(theme['tf-tabs'], 'tf-tabs')}
-			id={`${restProps.id}-tabs`}
-			items={tabs}
-			onSelect={(_, item) => setSelectedKey(item.key)}
-			selectedKey={selectedKey}
-		/>
-	);
+	return <Tabs id={`${restProps.id}-tabs`} tabs={tabs} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
-	Tabs.propTypes = {
+	TabsAdapter.propTypes = {
 		errors: PropTypes.object,
 		schema: PropTypes.shape({
 			items: PropTypes.arrayOf(
@@ -57,4 +56,4 @@ if (process.env.NODE_ENV !== 'production') {
 	};
 }
 
-export default Tabs;
+export default TabsAdapter;