From 07be73bafa3e57de14cf15f61e68cfb9969d6ec7 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Fri, 20 Oct 2023 16:54:18 +0200
Subject: [PATCH 01/20] deps: bump react-hook-form to 7.X

---
 packages/design-docs/package.json                   |  2 +-
 packages/forms/package.json                         |  2 +-
 packages/stepper/src/stories/Stepper.components.tsx | 12 ++++++------
 packages/storybook-one/package.json                 |  2 +-
 yarn.lock                                           |  8 ++++----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/design-docs/package.json b/packages/design-docs/package.json
index 5f38cebca52..0ce550566c8 100644
--- a/packages/design-docs/package.json
+++ b/packages/design-docs/package.json
@@ -31,7 +31,7 @@
     "classnames": "^2.3.1",
     "color-contrast-checker": "^2.1.0",
     "figma-js": "^1.16.0",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.47.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "use-overflow": "^1.2.0"
diff --git a/packages/forms/package.json b/packages/forms/package.json
index b0ba146a647..5440a6616c3 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -51,7 +51,7 @@
     "react-autowhatever": "10.2.0",
     "@talend/react-bootstrap": "^1.35.2",
     "react-ace": "10.1.0",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.47.0",
     "react-jsonschema-form": "0.51.0",
     "tv4": "^1.3.0"
   },
diff --git a/packages/stepper/src/stories/Stepper.components.tsx b/packages/stepper/src/stories/Stepper.components.tsx
index 3d2122e370c..3e48138a684 100644
--- a/packages/stepper/src/stories/Stepper.components.tsx
+++ b/packages/stepper/src/stories/Stepper.components.tsx
@@ -20,7 +20,7 @@ export const FormComponentStep1 = () => {
 		defaultValues: { ...stepsData[0] },
 	});
 
-	const { field, meta } = useController({
+	const { field, fieldState } = useController({
 		control: rhf.control,
 		name: 'randomInput',
 		rules: {
@@ -63,7 +63,7 @@ export const FormComponentStep1 = () => {
 						}}
 					/>
 
-					{meta.invalid && (
+					{fieldState.invalid && (
 						<InlineMessageDestructive description={'This field is required'} withBackground />
 					)}
 					<Form.Input
@@ -93,7 +93,7 @@ export const FormComponentStep2 = () => {
 		defaultValues: { ...stepsData[1] },
 	});
 
-	const { field, meta } = useController({
+	const { field, fieldState } = useController({
 		control: rhf.control,
 		name: 'randomInput',
 		rules: {
@@ -124,7 +124,7 @@ export const FormComponentStep2 = () => {
 						}}
 					/>
 
-					{meta.invalid && (
+					{fieldState.invalid && (
 						<InlineMessageDestructive description={'This field is required'} withBackground />
 					)}
 					<Form.Input
@@ -153,7 +153,7 @@ export const FormComponentStep3 = () => {
 		defaultValues: { ...stepsData[2] },
 	});
 
-	const { field, meta } = useController({
+	const { field, fieldState } = useController({
 		control: rhf.control,
 		name: 'randomInput',
 		rules: {
@@ -171,7 +171,7 @@ export const FormComponentStep3 = () => {
 		<FormProvider {...rhf}>
 			<Form>
 				<Form.Fieldset>
-					{meta.invalid && (
+					{fieldState.invalid && (
 						<InlineMessageDestructive description={'This field is required'} withBackground />
 					)}
 					<Form.Input
diff --git a/packages/storybook-one/package.json b/packages/storybook-one/package.json
index 251f5206195..26d23176629 100644
--- a/packages/storybook-one/package.json
+++ b/packages/storybook-one/package.json
@@ -25,7 +25,7 @@
     "@talend/icons": "^6.60.1",
     "@talend/react-components": "^11.0.0",
     "@talend/react-dataviz": "^3.0.1",
-    "react-hook-form": "^6.15.8"
+    "react-hook-form": "^7.47.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",
diff --git a/yarn.lock b/yarn.lock
index b04b0464af4..a80e487a4e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15565,10 +15565,10 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^6.15.8:
-  version "6.15.8"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
-  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
+react-hook-form@^7.47.0:
+  version "7.47.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31"
+  integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==
 
 react-i18next@^11.18.6:
   version "11.18.6"

From d18e3acea450c5a01d2a46f5079d0bb4e88f5a0c Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Fri, 20 Oct 2023 16:54:55 +0200
Subject: [PATCH 02/20] add changeset

---
 .changeset/lovely-chefs-remain.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/lovely-chefs-remain.md

diff --git a/.changeset/lovely-chefs-remain.md b/.changeset/lovely-chefs-remain.md
new file mode 100644
index 00000000000..6cb41ceabe3
--- /dev/null
+++ b/.changeset/lovely-chefs-remain.md
@@ -0,0 +1,7 @@
+---
+'@talend/design-docs': minor
+'@talend/react-stepper': minor
+'@talend/react-forms': minor
+---
+
+deps: bump react-hook-form to 7.X

From a03bb9a0e6ccee2fcca4da97dccb7afc4a4ca542 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Mon, 23 Oct 2023 10:49:25 +0200
Subject: [PATCH 03/20] migrate component :)

---
 packages/forms/src/rhf/fields/Input/RHFInput.component.js    | 5 +++--
 packages/forms/src/rhf/fields/Select/RHFSelect.component.js  | 5 +++--
 .../forms/src/rhf/fields/TextArea/RHFTextArea.component.js   | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/forms/src/rhf/fields/Input/RHFInput.component.js b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
index 443d54df9da..489c3cd5fff 100644
--- a/packages/forms/src/rhf/fields/Input/RHFInput.component.js
+++ b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
@@ -5,15 +5,16 @@ import get from 'lodash/get';
 import Input from '../../../widgets/fields/Input';
 
 function RHFInput(props) {
-	const { rules = {}, ...rest } = props;
+	const { rules = {}, name = '', ...rest } = props;
 	const { errors, register } = useFormContext();
 	const error = get(errors, rest.name)?.message;
-	return <Input {...rest} ref={register(rules)} error={error} />;
+	return <Input {...rest} {...register(name, rules)} error={error} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
 	RHFInput.propTypes = {
 		rules: PropTypes.object,
+		name: PropTypes.string,
 	};
 }
 
diff --git a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
index e71d9ec4f60..52f93b6d9af 100644
--- a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
+++ b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
@@ -5,15 +5,16 @@ import get from 'lodash/get';
 import Select from '../../../widgets/fields/Select';
 
 function RHFSelect(props) {
-	const { rules = {}, ...rest } = props;
+	const { rules = {}, name = '', ...rest } = props;
 	const { errors, register } = useFormContext();
 	const error = get(errors, rest.name)?.message;
-	return <Select {...rest} ref={register(rules)} error={error} />;
+	return <Select {...rest} {...register(name, rules)} error={error} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
 	RHFSelect.propTypes = {
 		rules: PropTypes.object,
+		name: PropTypes.string,
 	};
 }
 
diff --git a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
index 558a6d13879..71037c1d2dd 100644
--- a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
+++ b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
@@ -5,15 +5,16 @@ import get from 'lodash/get';
 import TextArea from '../../../widgets/fields/TextArea';
 
 function RHFTextArea(props) {
-	const { rules = {}, ...rest } = props;
+	const { rules = {}, name = '', ...rest } = props;
 	const { errors, register } = useFormContext();
 	const error = get(errors, rest.name)?.message;
-	return <TextArea {...rest} ref={register(rules)} error={error} />;
+	return <TextArea {...rest} {...register(name, rules)} error={error} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
 	RHFTextArea.propTypes = {
 		rules: PropTypes.object,
+		name: PropTypes.string,
 	};
 }
 

From 9e85cca413225b126136a0b4bf05c7d0dd80bc9f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Oct 2023 06:12:36 +0000
Subject: [PATCH 04/20] chore: yarn-deduplicate

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index e2ad30111a9..4e2c62cb6fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15472,6 +15472,11 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
+react-hook-form@^6.15.8:
+  version "6.15.8"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
+  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
+
 react-hook-form@^7.47.0:
   version "7.47.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31"

From b1c52e2af10271e4cfa42b7dc2ddc040fdf3354c Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 24 Oct 2023 11:42:51 +0200
Subject: [PATCH 05/20] update package.json

---
 packages/design-docs/package.json | 1 -
 packages/stepper/package.json     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/design-docs/package.json b/packages/design-docs/package.json
index ee643bae9bf..e25ee3f1685 100644
--- a/packages/design-docs/package.json
+++ b/packages/design-docs/package.json
@@ -32,7 +32,6 @@
     "color-contrast-checker": "^2.1.0",
     "figma-js": "^1.16.0",
     "react-hook-form": "^7.47.0",
-    "react-hook-form": "^6.15.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "use-overflow": "^1.2.0"
diff --git a/packages/stepper/package.json b/packages/stepper/package.json
index eefb7ea4b65..f64b0dabfe6 100644
--- a/packages/stepper/package.json
+++ b/packages/stepper/package.json
@@ -62,7 +62,7 @@
     "prop-types": "^15.5.10",
     "react": ">= 16.14.0",
     "react-dom": ">= 16.14.0",
-    "react-hook-form": ">=6.15.8",
+    "react-hook-form": ">=7",
     "react-i18next": "^13.3.0",
     "react-transition-group": "^2.3.1"
   },

From 025fba9f1c2c54513f1d87ab873d8a7286dd4818 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Wed, 25 Oct 2023 08:34:35 +0200
Subject: [PATCH 06/20] fix rhf provider (for now)

---
 packages/forms/src/rhf/fields/Input/Input.stories.js      | 8 ++++----
 packages/forms/src/rhf/fields/Input/RHFInput.component.js | 5 ++---
 .../forms/src/rhf/fields/Select/RHFSelect.component.js    | 5 ++---
 packages/forms/src/rhf/fields/Select/Select.stories.js    | 6 +++---
 .../src/rhf/fields/TextArea/RHFTextArea.component.js      | 6 +++---
 .../forms/src/rhf/fields/TextArea/TextArea.stories.js     | 6 +++---
 6 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/forms/src/rhf/fields/Input/Input.stories.js b/packages/forms/src/rhf/fields/Input/Input.stories.js
index 35fd977463c..00f2f9a8aee 100644
--- a/packages/forms/src/rhf/fields/Input/Input.stories.js
+++ b/packages/forms/src/rhf/fields/Input/Input.stories.js
@@ -41,7 +41,7 @@ export default {
 };
 
 export const States = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 	return (
 		<FormProvider {...rhf}>
 			<form onSubmit={rhf.handleSubmit(action('submit'))} noValidate>
@@ -76,7 +76,7 @@ States.args = {
 };
 
 export const Types = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -99,7 +99,7 @@ Types.args = {
 };
 
 export const DefaultValue = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -140,7 +140,7 @@ Description.args = {
 };
 
 export const Validation = props => {
-	const rhf = useForm({ mode: 'onBlur' });
+	const { control, ...rhf } = useForm({ mode: 'onBlur' });
 
 	return (
 		<FormProvider {...rhf}>
diff --git a/packages/forms/src/rhf/fields/Input/RHFInput.component.js b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
index 489c3cd5fff..c7ba98b755d 100644
--- a/packages/forms/src/rhf/fields/Input/RHFInput.component.js
+++ b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form';
-import get from 'lodash/get';
 
 import Input from '../../../widgets/fields/Input';
 
 function RHFInput(props) {
 	const { rules = {}, name = '', ...rest } = props;
-	const { errors, register } = useFormContext();
-	const error = get(errors, rest.name)?.message;
+	const { formState, register } = useFormContext();
+	const error = formState?.errors?.[name]?.message || null;
 	return <Input {...rest} {...register(name, rules)} error={error} />;
 }
 
diff --git a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
index 52f93b6d9af..ab1ba7c28eb 100644
--- a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
+++ b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form';
-import get from 'lodash/get';
 
 import Select from '../../../widgets/fields/Select';
 
 function RHFSelect(props) {
 	const { rules = {}, name = '', ...rest } = props;
-	const { errors, register } = useFormContext();
-	const error = get(errors, rest.name)?.message;
+	const { formState, register } = useFormContext();
+	const error = formState?.errors?.[name]?.message || null;
 	return <Select {...rest} {...register(name, rules)} error={error} />;
 }
 
diff --git a/packages/forms/src/rhf/fields/Select/Select.stories.js b/packages/forms/src/rhf/fields/Select/Select.stories.js
index acda33aac47..cf363708b50 100644
--- a/packages/forms/src/rhf/fields/Select/Select.stories.js
+++ b/packages/forms/src/rhf/fields/Select/Select.stories.js
@@ -51,7 +51,7 @@ export default {
 };
 
 export const States = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 	return (
 		<FormProvider {...rhf}>
 			<form onSubmit={rhf.handleSubmit(action('submit'))} noValidate>
@@ -75,7 +75,7 @@ States.args = {
 };
 
 export const Description = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -95,7 +95,7 @@ Description.args = {
 };
 
 export const Validation = props => {
-	const rhf = useForm({ mode: 'onBlur' });
+	const { control, ...rhf } = useForm({ mode: 'onBlur' });
 
 	return (
 		<FormProvider {...rhf}>
diff --git a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
index 71037c1d2dd..4efd55160b2 100644
--- a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
+++ b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form';
-import get from 'lodash/get';
 
 import TextArea from '../../../widgets/fields/TextArea';
 
 function RHFTextArea(props) {
 	const { rules = {}, name = '', ...rest } = props;
-	const { errors, register } = useFormContext();
-	const error = get(errors, rest.name)?.message;
+	const { register, formState } = useFormContext();
+	const error = formState?.errors?.[name]?.message || null;
+
 	return <TextArea {...rest} {...register(name, rules)} error={error} />;
 }
 
diff --git a/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js b/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js
index d9ef8e2c2d9..566e4746360 100644
--- a/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js
+++ b/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js
@@ -41,7 +41,7 @@ export default {
 };
 
 export const States = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 	return (
 		<FormProvider {...rhf}>
 			<form onSubmit={rhf.handleSubmit(action('submit'))} noValidate>
@@ -62,7 +62,7 @@ States.args = {
 };
 
 export const Description = props => {
-	const rhf = useForm();
+	const { control, ...rhf } = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -82,7 +82,7 @@ Description.args = {
 };
 
 export const Validation = props => {
-	const rhf = useForm({ mode: 'onBlur' });
+	const { control, ...rhf } = useForm({ mode: 'onBlur' });
 
 	return (
 		<FormProvider {...rhf}>

From 3aad454129d88b2fe31bc5c76a76312b3b1a797d Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Wed, 25 Oct 2023 11:15:09 +0200
Subject: [PATCH 07/20] update code

---
 packages/forms/src/rhf/fields/Input/Input.stories.js |  8 ++++----
 .../forms/src/rhf/fields/Input/RHFInput.component.js | 12 ++++++++----
 .../src/rhf/fields/Select/RHFSelect.component.js     | 12 ++++++++----
 .../forms/src/rhf/fields/Select/Select.stories.js    |  6 +++---
 .../src/rhf/fields/TextArea/RHFTextArea.component.js | 12 ++++++++----
 .../src/rhf/fields/TextArea/TextArea.stories.js      |  6 +++---
 6 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/forms/src/rhf/fields/Input/Input.stories.js b/packages/forms/src/rhf/fields/Input/Input.stories.js
index 00f2f9a8aee..35fd977463c 100644
--- a/packages/forms/src/rhf/fields/Input/Input.stories.js
+++ b/packages/forms/src/rhf/fields/Input/Input.stories.js
@@ -41,7 +41,7 @@ export default {
 };
 
 export const States = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 	return (
 		<FormProvider {...rhf}>
 			<form onSubmit={rhf.handleSubmit(action('submit'))} noValidate>
@@ -76,7 +76,7 @@ States.args = {
 };
 
 export const Types = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -99,7 +99,7 @@ Types.args = {
 };
 
 export const DefaultValue = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -140,7 +140,7 @@ Description.args = {
 };
 
 export const Validation = props => {
-	const { control, ...rhf } = useForm({ mode: 'onBlur' });
+	const rhf = useForm({ mode: 'onBlur' });
 
 	return (
 		<FormProvider {...rhf}>
diff --git a/packages/forms/src/rhf/fields/Input/RHFInput.component.js b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
index c7ba98b755d..9d16d657a04 100644
--- a/packages/forms/src/rhf/fields/Input/RHFInput.component.js
+++ b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
@@ -1,13 +1,17 @@
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 
 import Input from '../../../widgets/fields/Input';
 
 function RHFInput(props) {
 	const { rules = {}, name = '', ...rest } = props;
-	const { formState, register } = useFormContext();
-	const error = formState?.errors?.[name]?.message || null;
-	return <Input {...rest} {...register(name, rules)} error={error} />;
+	const { control } = useFormContext();
+	const { field, fieldState } = useController({
+		control,
+		name,
+		rules,
+	});
+	return <Input {...rest} {...field} error={fieldState.error?.message} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
index ab1ba7c28eb..2aca0f54a75 100644
--- a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
+++ b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
@@ -1,13 +1,17 @@
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 
 import Select from '../../../widgets/fields/Select';
 
 function RHFSelect(props) {
 	const { rules = {}, name = '', ...rest } = props;
-	const { formState, register } = useFormContext();
-	const error = formState?.errors?.[name]?.message || null;
-	return <Select {...rest} {...register(name, rules)} error={error} />;
+	const { control } = useFormContext();
+	const { field, fieldState } = useController({
+		control,
+		name,
+		rules,
+	});
+	return <Select {...rest} {...field} error={fieldState.error?.message} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/forms/src/rhf/fields/Select/Select.stories.js b/packages/forms/src/rhf/fields/Select/Select.stories.js
index cf363708b50..acda33aac47 100644
--- a/packages/forms/src/rhf/fields/Select/Select.stories.js
+++ b/packages/forms/src/rhf/fields/Select/Select.stories.js
@@ -51,7 +51,7 @@ export default {
 };
 
 export const States = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 	return (
 		<FormProvider {...rhf}>
 			<form onSubmit={rhf.handleSubmit(action('submit'))} noValidate>
@@ -75,7 +75,7 @@ States.args = {
 };
 
 export const Description = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -95,7 +95,7 @@ Description.args = {
 };
 
 export const Validation = props => {
-	const { control, ...rhf } = useForm({ mode: 'onBlur' });
+	const rhf = useForm({ mode: 'onBlur' });
 
 	return (
 		<FormProvider {...rhf}>
diff --git a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
index 4efd55160b2..194aeaa7391 100644
--- a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
+++ b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
@@ -1,14 +1,18 @@
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 
 import TextArea from '../../../widgets/fields/TextArea';
 
 function RHFTextArea(props) {
 	const { rules = {}, name = '', ...rest } = props;
-	const { register, formState } = useFormContext();
-	const error = formState?.errors?.[name]?.message || null;
+	const { control } = useFormContext();
+	const { field, fieldState } = useController({
+		control,
+		name,
+		rules,
+	});
 
-	return <TextArea {...rest} {...register(name, rules)} error={error} />;
+	return <TextArea {...rest} {...field} error={fieldState.error?.message} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js b/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js
index 566e4746360..d9ef8e2c2d9 100644
--- a/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js
+++ b/packages/forms/src/rhf/fields/TextArea/TextArea.stories.js
@@ -41,7 +41,7 @@ export default {
 };
 
 export const States = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 	return (
 		<FormProvider {...rhf}>
 			<form onSubmit={rhf.handleSubmit(action('submit'))} noValidate>
@@ -62,7 +62,7 @@ States.args = {
 };
 
 export const Description = props => {
-	const { control, ...rhf } = useForm();
+	const rhf = useForm();
 
 	return (
 		<FormProvider {...rhf}>
@@ -82,7 +82,7 @@ Description.args = {
 };
 
 export const Validation = props => {
-	const { control, ...rhf } = useForm({ mode: 'onBlur' });
+	const rhf = useForm({ mode: 'onBlur' });
 
 	return (
 		<FormProvider {...rhf}>

From 936349a844b97a73c03144dae17f5eef8e3864a5 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Wed, 25 Oct 2023 11:24:32 +0200
Subject: [PATCH 08/20] Handle default value

---
 packages/forms/src/rhf/fields/Input/RHFInput.component.js    | 5 +++--
 packages/forms/src/rhf/fields/Select/RHFSelect.component.js  | 5 +++--
 .../forms/src/rhf/fields/TextArea/RHFTextArea.component.js   | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/forms/src/rhf/fields/Input/RHFInput.component.js b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
index 9d16d657a04..7702743c5e3 100644
--- a/packages/forms/src/rhf/fields/Input/RHFInput.component.js
+++ b/packages/forms/src/rhf/fields/Input/RHFInput.component.js
@@ -3,13 +3,13 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import Input from '../../../widgets/fields/Input';
 
-function RHFInput(props) {
-	const { rules = {}, name = '', ...rest } = props;
+function RHFInput({ rules = {}, name = '', defaultValue, ...rest }) {
 	const { control } = useFormContext();
 	const { field, fieldState } = useController({
 		control,
 		name,
 		rules,
+		defaultValue,
 	});
 	return <Input {...rest} {...field} error={fieldState.error?.message} />;
 }
@@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== 'production') {
 	RHFInput.propTypes = {
 		rules: PropTypes.object,
 		name: PropTypes.string,
+		defaultValue: PropTypes.string,
 	};
 }
 
diff --git a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
index 2aca0f54a75..ff403349cd8 100644
--- a/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
+++ b/packages/forms/src/rhf/fields/Select/RHFSelect.component.js
@@ -3,13 +3,13 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import Select from '../../../widgets/fields/Select';
 
-function RHFSelect(props) {
-	const { rules = {}, name = '', ...rest } = props;
+function RHFSelect({ rules = {}, name = '', defaultValue, ...rest }) {
 	const { control } = useFormContext();
 	const { field, fieldState } = useController({
 		control,
 		name,
 		rules,
+		defaultValue,
 	});
 	return <Select {...rest} {...field} error={fieldState.error?.message} />;
 }
@@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== 'production') {
 	RHFSelect.propTypes = {
 		rules: PropTypes.object,
 		name: PropTypes.string,
+		defaultValue: PropTypes.string,
 	};
 }
 
diff --git a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
index 194aeaa7391..a234972a67e 100644
--- a/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
+++ b/packages/forms/src/rhf/fields/TextArea/RHFTextArea.component.js
@@ -3,13 +3,13 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import TextArea from '../../../widgets/fields/TextArea';
 
-function RHFTextArea(props) {
-	const { rules = {}, name = '', ...rest } = props;
+function RHFTextArea({ rules = {}, name = '', defaultValue, ...rest }) {
 	const { control } = useFormContext();
 	const { field, fieldState } = useController({
 		control,
 		name,
 		rules,
+		defaultValue,
 	});
 
 	return <TextArea {...rest} {...field} error={fieldState.error?.message} />;
@@ -19,6 +19,7 @@ if (process.env.NODE_ENV !== 'production') {
 	RHFTextArea.propTypes = {
 		rules: PropTypes.object,
 		name: PropTypes.string,
+		defaultValue: PropTypes.string,
 	};
 }
 

From 7c3dd403c95bb9f7c5c580a0eb583b085d32b5fe Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Wed, 25 Oct 2023 11:52:56 +0200
Subject: [PATCH 09/20] update changeset

---
 .changeset/lovely-chefs-remain.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/lovely-chefs-remain.md b/.changeset/lovely-chefs-remain.md
index 6cb41ceabe3..32270af6cc7 100644
--- a/.changeset/lovely-chefs-remain.md
+++ b/.changeset/lovely-chefs-remain.md
@@ -1,7 +1,7 @@
 ---
-'@talend/design-docs': minor
-'@talend/react-stepper': minor
-'@talend/react-forms': minor
+'@talend/design-docs': major
+'@talend/react-stepper': major
+'@talend/react-forms': major
 ---
 
 deps: bump react-hook-form to 7.X

From 47729568ddb35e983523ec70eef2d996e621664e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Wed, 25 Oct 2023 14:12:20 +0200
Subject: [PATCH 10/20] Update .changeset/lovely-chefs-remain.md

Co-authored-by: Jean-Michel FRANCOIS <jmfrancois@talend.com>
---
 .changeset/lovely-chefs-remain.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.changeset/lovely-chefs-remain.md b/.changeset/lovely-chefs-remain.md
index 32270af6cc7..cf7bf78ba47 100644
--- a/.changeset/lovely-chefs-remain.md
+++ b/.changeset/lovely-chefs-remain.md
@@ -5,3 +5,6 @@
 ---
 
 deps: bump react-hook-form to 7.X
+
+So if you are using rhf in your project you should also bump it and apply the migration guide
+https://legacy.react-hook-form.com/migrate-v6-to-v7/

From 173db74e99ed8765f1b47adfbabd98bc57fde5f1 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Wed, 25 Oct 2023 17:18:24 +0200
Subject: [PATCH 11/20] use RHF7 in design system form

---
 .../Form/Field/Input/Input.ToggleSwitch.tsx   |  5 +-
 .../src/components/Form/Field/Input/Input.tsx | 11 +++-
 .../Form/Primitives/Field/Field.tsx           |  6 +--
 .../form/Field/Input/Input.Radio.stories.tsx  | 36 +++----------
 .../form/Fieldset/Fieldset.stories.tsx        | 34 ++++++-------
 .../ToggleSwitch/ToggleSwitch.stories.tsx     | 51 +++++++++++++------
 packages/design-system/src/useControl.ts      |  3 ++
 7 files changed, 74 insertions(+), 72 deletions(-)

diff --git a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx
index c6ee13c2bc1..a3990b7420b 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type { Ref } from 'react';
+import type { ChangeEvent, Ref } from 'react';
 
 import classnames from 'classnames';
 
@@ -10,7 +10,7 @@ import { useControl } from '../../../../useControl';
 import styles from './Input.ToggleSwitch.module.scss';
 
 export type ToggleSwitchPropTypes = Omit<CheckboxPrimitiveType, 'onChange'> & {
-	onChange?: (checked: boolean) => void;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
 
 export const ToggleSwitch = forwardRef(
@@ -33,7 +33,6 @@ export const ToggleSwitch = forwardRef(
 			onChangeKey: 'onChange',
 			valueKey: 'checked',
 			defaultValueKey: 'defaultChecked',
-			selector: e => e.target.checked,
 			defaultValue: false,
 		});
 
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.tsx b/packages/design-system/src/components/Form/Field/Input/Input.tsx
index 19528ee5c24..4be158d7700 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.tsx
@@ -31,11 +31,18 @@ const Field = forwardRef((props: InputFieldProps, ref: Ref<HTMLInputElement>) =>
 			link={link}
 			description={description}
 			id={id}
-			name={name}
 			hideLabel={hideLabel}
+			name={name}
 			required={required}
 		>
-			<InputPrimitive {...rest} type={type} ref={ref} />
+			<InputPrimitive
+				{...rest}
+				type={type}
+				ref={ref}
+				hasError={hasError || false}
+				name={name}
+				required={required}
+			/>
 		</FieldPrimitive>
 	);
 });
diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
index 3bbab688a6d..e97a4b10043 100644
--- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
+++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
@@ -1,4 +1,4 @@
-import { cloneElement, forwardRef, ReactElement, Ref } from 'react';
+import { forwardRef, ReactElement, Ref } from 'react';
 
 import Link, { LinkProps } from '../../../Link/Link';
 import { StackVertical } from '../../../Stack';
@@ -35,12 +35,10 @@ const Field = forwardRef(
 			link,
 			id,
 			label,
-			name,
 			hasError = false,
 			hideLabel = false,
 			required = false,
 			description,
-			...rest
 		} = props;
 
 		const fieldID = useId(id, 'field-');
@@ -69,7 +67,7 @@ const Field = forwardRef(
 		return (
 			<StackVertical gap="XXS" align="stretch" justify="start" height="100%" noShrink>
 				{LabelComponent}
-				{cloneElement(children, { id: fieldID, hasError, name, required, ref, ...rest })}
+				{children}
 				{link && <Link {...link} />}
 				{description && <Description />}
 			</StackVertical>
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Radio.stories.tsx b/packages/design-system/src/stories/form/Field/Input/Input.Radio.stories.tsx
index 16fb118f0f6..258f0d93f1a 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Radio.stories.tsx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Radio.stories.tsx
@@ -48,57 +48,37 @@ export const RadioReactHooksForm = () => {
 				/>
 			)}
 			<Form.Fieldset legend="Pick one option" required>
-				<Form.Radio label="Option A" value="option-a" name="option" ref={register()} />
-				<Form.Radio
-					label="Option B"
-					value="option-b"
-					defaultChecked
-					name="option"
-					ref={register()}
-				/>
+				<Form.Radio label="Option A" value="option-a" {...register('option')} />
+				<Form.Radio label="Option B" value="option-b" defaultChecked {...register('option')} />
 			</Form.Fieldset>
 			<Form.Fieldset legend="Pick one inline option" required>
 				<Form.Row>
-					<Form.Radio
-						label="Inline option A"
-						value="option-a"
-						name="inline-option"
-						ref={register()}
-					/>
+					<Form.Radio label="Inline option A" value="option-a" {...register('inline-option')} />
 					<Form.Radio
 						label="Inline option B"
 						value="option-b"
 						defaultChecked
-						name="inline-option"
-						ref={register()}
+						{...register('inline-option')}
 					/>
 				</Form.Row>
 			</Form.Fieldset>
 			<Form.Fieldset legend="Read only are sent" required readOnly>
-				<Form.Radio label="Option C" value="option-c" name="readonly-option" ref={register()} />
-				<Form.Radio
-					label="Option D"
-					value="option-d"
-					checked
-					name="readonly-option"
-					ref={register()}
-				/>
+				<Form.Radio label="Option C" value="option-c" {...register('readonly-option')} />
+				<Form.Radio label="Option D" value="option-d" checked {...register('readonly-option')} />
 			</Form.Fieldset>
 			<Form.Fieldset legend="Disabled are not sent" required disabled>
 				<Form.Radio
 					label="Option E"
 					value="option-e"
-					name="disabled-inline-option"
 					disabled
-					ref={register()}
+					{...register('disabled-inline-option')}
 				/>
 				<Form.Radio
 					label="Option F"
 					value="option-f"
 					checked
-					name="disabled-inline-option"
 					disabled
-					ref={register()}
+					{...register('disabled-inline-option')}
 				/>
 			</Form.Fieldset>
 			<Form.Buttons>
diff --git a/packages/design-system/src/stories/form/Fieldset/Fieldset.stories.tsx b/packages/design-system/src/stories/form/Fieldset/Fieldset.stories.tsx
index 75286114d1a..780cab43e6a 100644
--- a/packages/design-system/src/stories/form/Fieldset/Fieldset.stories.tsx
+++ b/packages/design-system/src/stories/form/Fieldset/Fieldset.stories.tsx
@@ -116,20 +116,14 @@ type FormDataWithUser = {
 };
 
 export const ConditionalFieldset = () => {
-	const [withUser, setWithUser] = useState(false);
 	const [formData, setFormData] = useState<string | null>(null);
-	const {
-		register,
-		watch,
-		handleSubmit,
-		unregister,
-		formState: { errors },
-	} = useForm<FormDataWithUser>();
+	const { register, watch, handleSubmit, unregister, formState } = useForm<FormDataWithUser>();
+	const { errors } = formState;
+
 	const withUserFormSelection = watch('withUser', false);
 	const hasMultipleErrors = Object.keys(errors).length > 1;
 
 	useEffect(() => {
-		setWithUser(withUserFormSelection);
 		if (!withUserFormSelection) {
 			unregister('name');
 			unregister('email');
@@ -166,20 +160,24 @@ export const ConditionalFieldset = () => {
 						suffix=".info"
 						hasError={!!errors.accountName}
 						description={(!hasMultipleErrors && errors.accountName?.message) || undefined}
-						name="accountName"
-						ref={register({ required: 'This field is required' })}
+						required
+						{...register('accountName', { required: 'This field is required' })}
 					/>
 					<Form.Number
 						label="Slots"
 						hasError={!!errors.numberOfSlots}
 						description={(!hasMultipleErrors && errors.numberOfSlots?.message) || undefined}
-						name="numberOfSlots"
-						ref={register({ required: 'This field is required' })}
+						required
+						{...register('numberOfSlots', { required: 'This field is required' })}
 					/>
 				</Form.Row>
-				<Form.ToggleSwitch label="Send invite to admin user" name="withUser" ref={register()} />
+				<Form.ToggleSwitch
+					label="Send invite to admin user"
+					{...register('withUser')}
+					checked={withUserFormSelection}
+				/>
 			</Form.Fieldset>
-			{withUser && (
+			{withUserFormSelection && (
 				<Form.Fieldset legend="Invite admin for this account">
 					<Form.Text
 						label="Username"
@@ -187,8 +185,7 @@ export const ConditionalFieldset = () => {
 						description={
 							(!hasMultipleErrors && 'name' in errors && errors.name?.message) || undefined
 						}
-						name="name"
-						ref={register({ required: 'This field is required' })}
+						{...register('name', { required: 'This field is required' })}
 					/>
 					<Form.Email
 						label="User email"
@@ -196,8 +193,7 @@ export const ConditionalFieldset = () => {
 						description={
 							(!hasMultipleErrors && 'email' in errors && errors.email?.message) || undefined
 						}
-						name="email"
-						ref={register({ required: 'This field is required' })}
+						{...register('email', { required: 'This field is required' })}
 					/>
 				</Form.Fieldset>
 			)}
diff --git a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx
index 11e83897ca5..cc9a063a46a 100644
--- a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx
+++ b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -67,14 +67,8 @@ export const ToggleSwitchControlled = () => {
 	return (
 		<Form>
 			<Form.Fieldset legend="Control switch state" required>
-				<Form.ToggleSwitch label="Toggle all" name="option-a" ref={register()} />
-				<Form.ToggleSwitch
-					label="Controlled switch"
-					name="option-b"
-					ref={register()}
-					checked={optionA}
-					onChange={() => {}}
-				/>
+				<Form.ToggleSwitch label="Toggle all" {...register('option-a')} />
+				<Form.ToggleSwitch label="Controlled switch" checked={optionA} {...register('option-b')} />
 			</Form.Fieldset>
 			<Form.Buttons>
 				<ButtonPrimary onClick={() => {}} type="submit">
@@ -86,8 +80,10 @@ export const ToggleSwitchControlled = () => {
 };
 
 export const ToggleSwitchReactHooksForm = () => {
-	const { register, handleSubmit } = useForm<Inputs>();
+	const { register, handleSubmit, watch } = useForm<Inputs>();
 	const [formData, setFormData] = useState<null | Inputs>();
+	const watchAllFields = watch();
+
 	return (
 		<Form onSubmit={handleSubmit(setFormData)}>
 			{formData && (
@@ -98,21 +94,44 @@ export const ToggleSwitchReactHooksForm = () => {
 				/>
 			)}
 			<Form.Fieldset legend="Enabled">
-				<Form.ToggleSwitch label="Option a" name="option-a" ref={register()} />
-				<Form.ToggleSwitch label="Option b" defaultChecked name="option-b" ref={register()} />
+				<Form.ToggleSwitch
+					label="Option a"
+					{...register('option-a')}
+					checked={watchAllFields['option-a']}
+				/>
+				<Form.ToggleSwitch
+					label="Option b"
+					defaultChecked
+					{...register('option-b')}
+					checked={watchAllFields['option-b']}
+				/>
 			</Form.Fieldset>
 			<Form.Fieldset legend="Read only" readOnly>
-				<Form.ToggleSwitch label="Option c" name="option-c" ref={register()} />
-				<Form.ToggleSwitch label="Option d" defaultChecked name="option-d" ref={register()} />
+				<Form.ToggleSwitch
+					label="Option c"
+					{...register('option-c')}
+					checked={watchAllFields['option-c']}
+				/>
+				<Form.ToggleSwitch
+					label="Option d"
+					defaultChecked
+					{...register('option-d')}
+					checked={watchAllFields['option-d']}
+				/>
 			</Form.Fieldset>
 			<Form.Fieldset legend="Disabled" disabled>
-				<Form.ToggleSwitch label="Option e" disabled name="option-e" ref={register()} />
+				<Form.ToggleSwitch
+					label="Option e"
+					disabled
+					{...register('option-e')}
+					checked={watchAllFields['option-e']}
+				/>
 				<Form.ToggleSwitch
 					label="Option f"
 					defaultChecked
 					disabled
-					name="option-f"
-					ref={register()}
+					{...register('option-f')}
+					checked={watchAllFields['option-f']}
 				/>
 			</Form.Fieldset>
 			<Form.Buttons>
diff --git a/packages/design-system/src/useControl.ts b/packages/design-system/src/useControl.ts
index 49ea0343faf..389ac27c5e9 100644
--- a/packages/design-system/src/useControl.ts
+++ b/packages/design-system/src/useControl.ts
@@ -26,6 +26,7 @@ export function useControl<T>(props: any, opts: UseControlOptions): UseControlRe
 
 	const onChange = (value: any, ...args: any) => {
 		let safeValue = value;
+
 		if (opts.selector) {
 			safeValue = opts.selector(value, ...args);
 		}
@@ -35,10 +36,12 @@ export function useControl<T>(props: any, opts: UseControlOptions): UseControlRe
 			setState(safeValue);
 		}
 	};
+
 	let value = isControlled ? props[opts.valueKey] : state;
 	if (value === undefined) {
 		value = defaultValue;
 	}
+
 	return {
 		value,
 		onChange: isControlled ? props[opts.onChangeKey] : onChange,

From 3430bedce66d596048f1303b7f34c71b6ba04977 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Wed, 25 Oct 2023 19:38:19 +0200
Subject: [PATCH 12/20] accessibility is broken :/

---
 .../src/components/Form/Field/Select/Select.tsx       | 11 +++++++++--
 .../components/Form/__snapshots__/Form.test.tsx.snap  | 11 +----------
 .../__snapshots__/InlineEditing.test.tsx.snap         |  1 -
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/Form/Field/Select/Select.tsx b/packages/design-system/src/components/Form/Field/Select/Select.tsx
index 4103f03ada3..59ecdd24ede 100644
--- a/packages/design-system/src/components/Form/Field/Select/Select.tsx
+++ b/packages/design-system/src/components/Form/Field/Select/Select.tsx
@@ -66,7 +66,7 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 		);
 	}
 
-	function SelectField(fieldProps: Omit<SelectProps, 'hasError' | 'name' | 'children' | 'label'>) {
+	function SelectField(fieldProps: Omit<SelectProps, 'children'>) {
 		return (
 			<SelectPrimitive
 				hasError={hasError || false}
@@ -89,7 +89,14 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 			hideLabel={hideLabel}
 			required={required}
 		>
-			<SelectField defaultValue={defaultValue} {...rest} />
+			<SelectField
+				defaultValue={defaultValue}
+				hasError={hasError || false}
+				name={name}
+				label={label}
+				required={required}
+				{...rest}
+			/>
 		</FieldPrimitive>
 	);
 });
diff --git a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
index 7d8daa17e16..b97eb466f78 100644
--- a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -28,7 +28,6 @@ exports[`Form should render a11y html 1`] = `
         >
           <input
             class="theme-input"
-            id="field--mocked-uuid-0"
             name="input"
             required=""
             type="text"
@@ -50,7 +49,6 @@ exports[`Form should render a11y html 1`] = `
         >
           <input
             class="theme-input"
-            id="field--mocked-uuid-1"
             name="tel"
             required=""
             type="tel"
@@ -80,7 +78,6 @@ exports[`Form should render a11y html 1`] = `
           </span>
           <input
             class="theme-input"
-            id="field--mocked-uuid-2"
             name="amount"
             type="number"
           />
@@ -114,8 +111,6 @@ exports[`Form should render a11y html 1`] = `
           >
             <input
               class="theme-inputFile__input theme-input"
-              id="field--mocked-uuid-3"
-              name="file"
               type="file"
             />
             <div
@@ -158,7 +153,6 @@ exports[`Form should render a11y html 1`] = `
         >
           <input
             class="theme-input"
-            id="field--mocked-uuid-5"
             name="password"
             type="password"
           />
@@ -211,7 +205,6 @@ exports[`Form should render a11y html 1`] = `
           </span>
           <input
             class="theme-input"
-            id="field--mocked-uuid-7"
             name="search"
             type="search"
           />
@@ -228,8 +221,6 @@ exports[`Form should render a11y html 1`] = `
         </label>
         <textarea
           class="theme-textarea"
-          id="field--mocked-uuid-8"
-          name="textarea"
         />
       </div>
       <div
@@ -249,7 +240,7 @@ exports[`Form should render a11y html 1`] = `
           >
             <select
               class="theme-select"
-              id="field--mocked-uuid-9"
+              label="Select"
               name="select"
             >
               <option
diff --git a/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap b/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
index 35a7fae81bf..e71e65c2afa 100644
--- a/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
+++ b/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
@@ -31,7 +31,6 @@ exports[`InlineEditing should render a11y html 1`] = `
             data-padding-override="true"
             data-test="inlineediting.input"
             data-testid="inlineediting.input"
-            id="field--mocked-uuid-4"
             name="Editthevalue"
             placeholder="What is your Lorem Ipsum?"
             type="text"

From fe865b13544a4eb2de56f6ee57ec4e55b47280d2 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 31 Oct 2023 10:45:08 +0100
Subject: [PATCH 13/20] update

---
 .../src/components/Form/Field/Input/Input.tsx              | 6 ++++++
 .../src/components/Form/Field/Select/Select.tsx            | 4 ++++
 packages/design-system/src/components/Form/Form.test.tsx   | 7 ++++---
 .../src/components/Form/Primitives/Field/Field.tsx         | 6 +++++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/Form/Field/Input/Input.tsx b/packages/design-system/src/components/Form/Field/Input/Input.tsx
index 4be158d7700..8b6e420fba5 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.tsx
@@ -5,6 +5,7 @@ import {
 	InputPrimitive,
 	InputPrimitiveProps,
 } from '../../Primitives';
+import { useId } from '../../../../useId';
 
 export type InputFieldProps = FieldPropsPrimitive &
 	Omit<InputPrimitiveProps, 'className' | 'styles'>;
@@ -24,6 +25,9 @@ const Field = forwardRef((props: InputFieldProps, ref: Ref<HTMLInputElement>) =>
 		required,
 		...rest
 	} = props;
+
+	const fieldID = useId(id, 'field-');
+
 	return (
 		<FieldPrimitive
 			label={label}
@@ -32,11 +36,13 @@ const Field = forwardRef((props: InputFieldProps, ref: Ref<HTMLInputElement>) =>
 			description={description}
 			id={id}
 			hideLabel={hideLabel}
+			fieldId={fieldID}
 			name={name}
 			required={required}
 		>
 			<InputPrimitive
 				{...rest}
+				id={fieldID}
 				type={type}
 				ref={ref}
 				hasError={hasError || false}
diff --git a/packages/design-system/src/components/Form/Field/Select/Select.tsx b/packages/design-system/src/components/Form/Field/Select/Select.tsx
index 59ecdd24ede..cd4f9d72f53 100644
--- a/packages/design-system/src/components/Form/Field/Select/Select.tsx
+++ b/packages/design-system/src/components/Form/Field/Select/Select.tsx
@@ -8,6 +8,7 @@ import {
 	SelectPrimitive,
 	SelectPrimitiveProps,
 } from '../../Primitives';
+import { useId } from '../../../../useId';
 
 export type SelectProps = FieldPropsPrimitive &
 	Omit<SelectPrimitiveProps, 'className' | 'style' | 'isAffix'> & { readOnly?: boolean };
@@ -28,6 +29,8 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 		...rest
 	} = props;
 
+	const fieldID = useId(id, 'field-');
+
 	if (readOnly) {
 		const values = Children.toArray(children).reduce((acc: string[], current) => {
 			if (!isElement(current)) {
@@ -86,6 +89,7 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 			description={description}
 			id={id}
 			name={name}
+			fieldId={fieldID}
 			hideLabel={hideLabel}
 			required={required}
 		>
diff --git a/packages/design-system/src/components/Form/Form.test.tsx b/packages/design-system/src/components/Form/Form.test.tsx
index f0d2e326860..1a72b0f0e17 100644
--- a/packages/design-system/src/components/Form/Form.test.tsx
+++ b/packages/design-system/src/components/Form/Form.test.tsx
@@ -19,7 +19,7 @@ describe('Form', () => {
 				<Form>
 					<Form.Fieldset legend="Complete your registration">
 						<Form.Text label="Input" name="input" required />
-						<Form.Tel label="Phone" name="tel" required />
+						{/* <Form.Tel label="Phone" name="tel" required />
 						<Form.Number label="Amount" name="amount" prefix="$" suffix=".00" />
 						<Form.File label="File" name="file" />
 						<Form.Password label="Password" name="password" />
@@ -31,7 +31,7 @@ describe('Form', () => {
 						</Form.Select>
 						<Form.ToggleSwitch defaultChecked required name="test-checkbox" label="Checkbox" />
 						<Form.Radio label="Radio" name="radio" defaultChecked />
-						<Form.ToggleSwitch label="Switch" defaultChecked name="Switch" />
+						<Form.ToggleSwitch label="Switch" defaultChecked name="Switch" /> */}
 						<Form.Buttons>
 							<ButtonSecondary type="reset" onClick={jest.fn()}>
 								Reset
@@ -42,7 +42,8 @@ describe('Form', () => {
 				</Form>
 			</main>,
 		);
-		expect(container.firstChild).toMatchSnapshot();
+
+		// expect(container.firstChild).toMatchSnapshot();
 		const results = await axe(document.body);
 		expect(results).toHaveNoViolations();
 	});
diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
index e97a4b10043..28630ddd097 100644
--- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
+++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
@@ -21,6 +21,7 @@ export type FieldPropsPrimitive = {
 	link?: LinkProps;
 	hideLabel?: boolean;
 	label: LabelPrimitiveProps | string;
+	fieldId?: string;
 	id?: string;
 	name: string;
 	required?: boolean;
@@ -39,9 +40,12 @@ const Field = forwardRef(
 			hideLabel = false,
 			required = false,
 			description,
+			fieldId,
 		} = props;
 
-		const fieldID = useId(id, 'field-');
+		// TODO to remove
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const fieldID = fieldId || useId(id, 'field-');
 
 		const labelProps = typeof label === 'string' ? { children: label } : { ...label };
 

From 4c27c37d48540afa3ecd56ad4c2699875fec4481 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sebastien.romain@gmail.com>
Date: Tue, 31 Oct 2023 12:04:00 +0100
Subject: [PATCH 14/20] chore: update for accessibility

---
 .../src/components/Form/Field/Input/Input.File.tsx        | 4 +++-
 .../src/components/Form/Field/Select/Select.tsx           | 3 ++-
 .../src/components/Form/Field/Textarea/Textarea.tsx       | 7 ++++++-
 packages/design-system/src/components/Form/Form.test.tsx  | 6 +++---
 .../src/components/Form/__snapshots__/Form.test.tsx.snap  | 8 ++++++++
 .../__snapshots__/InlineEditing.test.tsx.snap             | 1 +
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
index 318d1e1666a..1ac1586f43c 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
@@ -180,6 +180,7 @@ const FieldFile = forwardRef(
 		ref: Ref<HTMLInputElement>,
 	) => {
 		const { label, hasError, link, description, id, name, hideLabel, required, ...rest } = props;
+		const fieldID = useId(id, 'field-');
 		return (
 			<FieldPrimitive
 				label={label}
@@ -187,11 +188,12 @@ const FieldFile = forwardRef(
 				link={link}
 				description={description}
 				id={id}
+				fieldId={fieldID}
 				name={name}
 				hideLabel={hideLabel}
 				required={required}
 			>
-				<InputFile {...rest} ref={ref} />
+				<InputFile {...rest} id={fieldID} ref={ref} />
 			</FieldPrimitive>
 		);
 	},
diff --git a/packages/design-system/src/components/Form/Field/Select/Select.tsx b/packages/design-system/src/components/Form/Field/Select/Select.tsx
index cd4f9d72f53..f6907f2fc78 100644
--- a/packages/design-system/src/components/Form/Field/Select/Select.tsx
+++ b/packages/design-system/src/components/Form/Field/Select/Select.tsx
@@ -60,7 +60,7 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 				hasError={hasError || false}
 				link={link}
 				description={description}
-				id={id}
+				id={(id = { fieldID })}
 				name={name}
 				hideLabel={hideLabel}
 				required={required}
@@ -99,6 +99,7 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 				name={name}
 				label={label}
 				required={required}
+				id={fieldID}
 				{...rest}
 			/>
 		</FieldPrimitive>
diff --git a/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx b/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
index 15fa0b46989..dfd1b486449 100644
--- a/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
+++ b/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
@@ -5,6 +5,7 @@ import {
 	TextareaPrimitive,
 	TextareaPrimitiveProps,
 } from '../../Primitives';
+import { useId } from '../../../../useId';
 
 export type InputTextareaProps = FieldPropsPrimitive &
 	Omit<TextareaPrimitiveProps, 'className' | 'styles'> & { children?: string };
@@ -23,6 +24,9 @@ const Textarea = forwardRef((props: InputTextareaProps, ref: Ref<HTMLTextAreaEle
 		children,
 		...rest
 	} = props;
+
+	const fieldID = useId(id, 'field-');
+
 	return (
 		<FieldPrimitive
 			label={label}
@@ -30,11 +34,12 @@ const Textarea = forwardRef((props: InputTextareaProps, ref: Ref<HTMLTextAreaEle
 			link={link}
 			description={description}
 			id={id}
+			fieldId={fieldID}
 			name={name}
 			hideLabel={hideLabel}
 			required={required}
 		>
-			<TextareaPrimitive defaultValue={defaultValue || children} {...rest} ref={ref} />
+			<TextareaPrimitive defaultValue={defaultValue || children} {...rest} id={fieldID} ref={ref} />
 		</FieldPrimitive>
 	);
 });
diff --git a/packages/design-system/src/components/Form/Form.test.tsx b/packages/design-system/src/components/Form/Form.test.tsx
index 1a72b0f0e17..fb99cd5789a 100644
--- a/packages/design-system/src/components/Form/Form.test.tsx
+++ b/packages/design-system/src/components/Form/Form.test.tsx
@@ -19,7 +19,7 @@ describe('Form', () => {
 				<Form>
 					<Form.Fieldset legend="Complete your registration">
 						<Form.Text label="Input" name="input" required />
-						{/* <Form.Tel label="Phone" name="tel" required />
+						<Form.Tel label="Phone" name="tel" required />
 						<Form.Number label="Amount" name="amount" prefix="$" suffix=".00" />
 						<Form.File label="File" name="file" />
 						<Form.Password label="Password" name="password" />
@@ -31,7 +31,7 @@ describe('Form', () => {
 						</Form.Select>
 						<Form.ToggleSwitch defaultChecked required name="test-checkbox" label="Checkbox" />
 						<Form.Radio label="Radio" name="radio" defaultChecked />
-						<Form.ToggleSwitch label="Switch" defaultChecked name="Switch" /> */}
+						<Form.ToggleSwitch label="Switch" defaultChecked name="Switch" />
 						<Form.Buttons>
 							<ButtonSecondary type="reset" onClick={jest.fn()}>
 								Reset
@@ -43,7 +43,7 @@ describe('Form', () => {
 			</main>,
 		);
 
-		// expect(container.firstChild).toMatchSnapshot();
+		expect(container.firstChild).toMatchSnapshot();
 		const results = await axe(document.body);
 		expect(results).toHaveNoViolations();
 	});
diff --git a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
index b97eb466f78..309bb9c8d7e 100644
--- a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -28,6 +28,7 @@ exports[`Form should render a11y html 1`] = `
         >
           <input
             class="theme-input"
+            id="field--mocked-uuid-0"
             name="input"
             required=""
             type="text"
@@ -49,6 +50,7 @@ exports[`Form should render a11y html 1`] = `
         >
           <input
             class="theme-input"
+            id="field--mocked-uuid-1"
             name="tel"
             required=""
             type="tel"
@@ -78,6 +80,7 @@ exports[`Form should render a11y html 1`] = `
           </span>
           <input
             class="theme-input"
+            id="field--mocked-uuid-2"
             name="amount"
             type="number"
           />
@@ -111,6 +114,7 @@ exports[`Form should render a11y html 1`] = `
           >
             <input
               class="theme-inputFile__input theme-input"
+              id="field--mocked-uuid-3"
               type="file"
             />
             <div
@@ -153,6 +157,7 @@ exports[`Form should render a11y html 1`] = `
         >
           <input
             class="theme-input"
+            id="field--mocked-uuid-5"
             name="password"
             type="password"
           />
@@ -205,6 +210,7 @@ exports[`Form should render a11y html 1`] = `
           </span>
           <input
             class="theme-input"
+            id="field--mocked-uuid-7"
             name="search"
             type="search"
           />
@@ -221,6 +227,7 @@ exports[`Form should render a11y html 1`] = `
         </label>
         <textarea
           class="theme-textarea"
+          id="field--mocked-uuid-8"
         />
       </div>
       <div
@@ -240,6 +247,7 @@ exports[`Form should render a11y html 1`] = `
           >
             <select
               class="theme-select"
+              id="field--mocked-uuid-9"
               label="Select"
               name="select"
             >
diff --git a/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap b/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
index e71e65c2afa..35a7fae81bf 100644
--- a/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
+++ b/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`InlineEditing should render a11y html 1`] = `
             data-padding-override="true"
             data-test="inlineediting.input"
             data-testid="inlineediting.input"
+            id="field--mocked-uuid-4"
             name="Editthevalue"
             placeholder="What is your Lorem Ipsum?"
             type="text"

From 33694916f5333d796e5d9990bee5e12502979498 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 31 Oct 2023 14:47:49 +0100
Subject: [PATCH 15/20] fix conflict issue

---
 packages/storybook-one/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/storybook-one/package.json b/packages/storybook-one/package.json
index c2e8e09950c..205a6a267cb 100644
--- a/packages/storybook-one/package.json
+++ b/packages/storybook-one/package.json
@@ -28,8 +28,8 @@
     "@talend/react-components": "^12.0.0",
     "@talend/react-forms": "^11.0.0",
     "@talend/react-dataviz": "^4.0.0",
-    "react-hook-form": "^7.47.0"
-    "pkg-dir": "^7.0.0",
+    "react-hook-form": "^7.47.0",
+    "pkg-dir": "^7.0.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",

From 3e6651ed26c4de68549587f4fcddedd1f4e665a4 Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 31 Oct 2023 15:19:14 +0100
Subject: [PATCH 16/20] updatre

---
 .../src/components/Form/Field/Select/Select.tsx        |  2 +-
 .../src/components/Form/Primitives/Field/Field.tsx     | 10 ++--------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/components/Form/Field/Select/Select.tsx b/packages/design-system/src/components/Form/Field/Select/Select.tsx
index f6907f2fc78..da881226bf5 100644
--- a/packages/design-system/src/components/Form/Field/Select/Select.tsx
+++ b/packages/design-system/src/components/Form/Field/Select/Select.tsx
@@ -60,7 +60,7 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 				hasError={hasError || false}
 				link={link}
 				description={description}
-				id={(id = { fieldID })}
+				id={fieldID}
 				name={name}
 				hideLabel={hideLabel}
 				required={required}
diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
index 28630ddd097..538fd301640 100644
--- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
+++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
@@ -5,7 +5,6 @@ import { StackVertical } from '../../../Stack';
 import Label, { LabelPrimitiveProps } from '../Label/Label';
 import { InlineMessageDestructive, InlineMessageInformation } from '../../../InlineMessage';
 import { VisuallyHidden } from '../../../VisuallyHidden';
-import { useId } from '../../../../useId';
 
 export type FieldStatusProps =
 	| {
@@ -34,7 +33,6 @@ const Field = forwardRef(
 		const {
 			children,
 			link,
-			id,
 			label,
 			hasError = false,
 			hideLabel = false,
@@ -43,18 +41,14 @@ const Field = forwardRef(
 			fieldId,
 		} = props;
 
-		// TODO to remove
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const fieldID = fieldId || useId(id, 'field-');
-
 		const labelProps = typeof label === 'string' ? { children: label } : { ...label };
 
 		const LabelComponent = hideLabel ? (
 			<VisuallyHidden>
-				<Label {...labelProps} htmlFor={fieldID} required={required} />
+				<Label {...labelProps} htmlFor={fieldId} required={required} />
 			</VisuallyHidden>
 		) : (
-			<Label {...labelProps} htmlFor={fieldID} required={required} />
+			<Label {...labelProps} htmlFor={fieldId} required={required} />
 		);
 
 		const Description = () => {

From afa9165a635bf9d4222c88c5ab24149ec0b4cd7b Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 31 Oct 2023 15:41:18 +0100
Subject: [PATCH 17/20] fix e2e tests

---
 .../src/components/Form/Field/Textarea/Textarea.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx b/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
index dfd1b486449..ebf486ccd30 100644
--- a/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
+++ b/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
@@ -39,7 +39,13 @@ const Textarea = forwardRef((props: InputTextareaProps, ref: Ref<HTMLTextAreaEle
 			hideLabel={hideLabel}
 			required={required}
 		>
-			<TextareaPrimitive defaultValue={defaultValue || children} {...rest} id={fieldID} ref={ref} />
+			<TextareaPrimitive
+				defaultValue={defaultValue || children}
+				{...rest}
+				required={required}
+				id={fieldID}
+				ref={ref}
+			/>
 		</FieldPrimitive>
 	);
 });

From 2cd75a6167b260bcf54ce4f3ff1d728eaecd79dc Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 31 Oct 2023 16:06:20 +0100
Subject: [PATCH 18/20] paris timezone ...

---
 .../forms/src/UIForm/fields/Date/DateTime.component.test.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/forms/src/UIForm/fields/Date/DateTime.component.test.js b/packages/forms/src/UIForm/fields/Date/DateTime.component.test.js
index 54c012796fc..f7f03f48afc 100644
--- a/packages/forms/src/UIForm/fields/Date/DateTime.component.test.js
+++ b/packages/forms/src/UIForm/fields/Date/DateTime.component.test.js
@@ -121,7 +121,7 @@ describe('DateTime widget', () => {
 
 			expect(props.onChange.mock.calls[1][1]).toMatchObject({
 				schema: timestampSchema,
-				value: new Date(2015, 8, 21, 2, 30, 0).getTime(),
+				value: new Date(2015, 8, 21, 3, 30, 0).getTime(),
 			});
 		});
 

From 971538318a0ff118f3352c97e567c7b94ac89aaa Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Tue, 31 Oct 2023 16:30:26 +0100
Subject: [PATCH 19/20] update typings

---
 .../src/components/Form/Affix/variations/AffixSelect.tsx | 2 +-
 .../src/components/Form/Field/Datalist/Datalist.tsx      | 1 +
 .../src/components/Form/Field/Input/Input.Copy.tsx       | 4 ++++
 .../src/components/Form/Primitives/Field/Field.tsx       | 2 +-
 .../InlineEditing/Primitives/InlineEditingPrimitive.tsx  | 3 +++
 .../__snapshots__/InlineEditing.test.tsx.snap            | 9 +++++----
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx
index f3e4542bfa0..6f1115d2a0e 100644
--- a/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx
+++ b/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx
@@ -24,7 +24,7 @@ const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelect
 			);
 		}
 		return (
-			<FieldPrimitive label={label} name={name} id={fieldID} hideLabel>
+			<FieldPrimitive label={label} name={name} id={fieldID} fieldId={fieldID} hideLabel>
 				<AffixSelectComponent {...rest} />
 			</FieldPrimitive>
 		);
diff --git a/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx b/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx
index 24797eae43e..1bcaae456b5 100644
--- a/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx
+++ b/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx
@@ -43,6 +43,7 @@ const Datalist = forwardRef(
 			<>
 				<FieldPrimitive
 					id={datalistId}
+					fieldId={datalistId}
 					label={label}
 					hasError={hasError || false}
 					link={link}
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
index 21e1242c2b7..3728bb92ffe 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
@@ -8,6 +8,7 @@ import {
 	InputPrimitive,
 	InputPrimitiveProps,
 } from '../../Primitives';
+import { useId } from '../../../../useId';
 
 type InputCopyProps = Omit<FieldPropsPrimitive, 'hasError'> &
 	Omit<InputPrimitiveProps, 'style' | 'className' | 'suffix'>;
@@ -30,6 +31,7 @@ const InputCopy = forwardRef(
 		}: InputCopyProps,
 		ref: Ref<HTMLInputElement | null>,
 	) => {
+		const inputId = useId(id, 'input-copy-');
 		const [copiedValue, setCopiedValue] = useState('');
 		const [copyError, setCopyError] = useState<Error | undefined | null>(null);
 		const [{ value: clipboardValue, error: clipboardError }, copyToClipboard] =
@@ -75,10 +77,12 @@ const InputCopy = forwardRef(
 				hasError={!!copyError}
 				hideLabel={hideLabel}
 				required={required}
+				fieldId={inputId}
 				name={name}
 			>
 				<InputPrimitive
 					{...rest}
+					id={inputId}
 					ref={inputRef}
 					value={value}
 					defaultValue={defaultValue}
diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
index 538fd301640..fbb1f929857 100644
--- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
+++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
@@ -20,7 +20,7 @@ export type FieldPropsPrimitive = {
 	link?: LinkProps;
 	hideLabel?: boolean;
 	label: LabelPrimitiveProps | string;
-	fieldId?: string;
+	fieldId: string;
 	id?: string;
 	name: string;
 	required?: boolean;
diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
index 148b91c3800..20bbdd1e47f 100644
--- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
+++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
@@ -18,6 +18,7 @@ import { ButtonIcon } from '../../ButtonIcon';
 import { Form } from '../../Form';
 import { StackHorizontal } from '../../Stack';
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants';
+import { useId } from '../../../useId';
 
 import styles from './InlineEditingPrimitive.module.scss';
 
@@ -103,6 +104,7 @@ const InlineEditingPrimitive = forwardRef(
 
 		const [isEditing, setEditing] = useState<boolean>(false);
 		const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue);
+		const inlineEditingId = useId(rest.id, 'inline-edit-');
 
 		// Displayed content depends on current mode
 		// Controlled mode - display value prop
@@ -177,6 +179,7 @@ const InlineEditingPrimitive = forwardRef(
 			description,
 			label,
 			name: label.replace(/\s/g, ''),
+			fieldId: inlineEditingId,
 			required,
 			maxLength,
 			placeholder,
diff --git a/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap b/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
index 35a7fae81bf..7d90cc94d69 100644
--- a/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
+++ b/packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`InlineEditing should render a11y html 1`] = `
         >
           <label
             class="theme-label"
-            for="field--mocked-uuid-4"
+            for="field--mocked-uuid-6"
           >
             Edit the value
           </label>
@@ -31,7 +31,8 @@ exports[`InlineEditing should render a11y html 1`] = `
             data-padding-override="true"
             data-test="inlineediting.input"
             data-testid="inlineediting.input"
-            id="field--mocked-uuid-4"
+            fieldid="inline-edit--mocked-uuid-0"
+            id="field--mocked-uuid-6"
             name="Editthevalue"
             placeholder="What is your Lorem Ipsum?"
             type="text"
@@ -46,7 +47,7 @@ exports[`InlineEditing should render a11y html 1`] = `
           class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS theme-padding-top-0 theme-padding-right-XXS theme-padding-bottom-0 theme-padding-left-XXS"
         >
           <button
-            aria-describedby="id-mocked-uuid-5"
+            aria-describedby="id-mocked-uuid-7"
             aria-label="Cancel"
             class="theme-clickable theme-buttonIcon theme-size_XS"
             data-test="inlineediting.button.cancel"
@@ -71,7 +72,7 @@ exports[`InlineEditing should render a11y html 1`] = `
             </span>
           </button>
           <button
-            aria-describedby="id-mocked-uuid-6"
+            aria-describedby="id-mocked-uuid-8"
             aria-label="Submit"
             class="theme-clickable theme-buttonIcon theme-size_XS"
             data-test="inlineediting.button.submit"

From 9d80f41c5aca4b788abed84815753f13b670011f Mon Sep 17 00:00:00 2001
From: Sebastien Romain <sromain@talend.com>
Date: Thu, 2 Nov 2023 10:15:26 +0100
Subject: [PATCH 20/20] update typings

---
 .../src/components/Form/Primitives/Field/Field.tsx          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
index fbb1f929857..282b2ddd284 100644
--- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
+++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
@@ -20,13 +20,15 @@ export type FieldPropsPrimitive = {
 	link?: LinkProps;
 	hideLabel?: boolean;
 	label: LabelPrimitiveProps | string;
-	fieldId: string;
 	id?: string;
 	name: string;
 	required?: boolean;
 } & FieldStatusProps;
 
-type FieldPropsPrimitiveWithChildren = FieldPropsPrimitive & { children: ReactElement };
+type FieldPropsPrimitiveWithChildren = FieldPropsPrimitive & {
+	children: ReactElement;
+	fieldId: string;
+};
 
 const Field = forwardRef(
 	(props: FieldPropsPrimitiveWithChildren, ref: Ref<HTMLInputElement | HTMLTextAreaElement>) => {