deps: bump react-hook-form to 7.X (#4947)

.changeset/lovely-chefs-remain.md

@@ -0,0 +1,10 @@
+---
+'@talend/design-docs': major
+'@talend/react-stepper': major
+'@talend/react-forms': major
+---
+
+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/

packages/design-docs/package.json

@@ -31,8 +31,8 @@
     "classnames": "^2.3.2",
     "color-contrast-checker": "^2.1.0",
     "figma-js": "^1.16.0",
+    "react-hook-form": "^7.47.0",
     "pkg-dir": "^7.0.0",
-    "react-hook-form": "^6.15.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "use-overflow": "^1.2.0"

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

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}

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}

packages/design-system/src/components/Form/Field/Input/Input.File.tsx

@@ -180,18 +180,20 @@ 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}
 				hasError={hasError || false}
 				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>
 		);
 	},

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,
 		});
 

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,18 +25,30 @@ const Field = forwardRef((props: InputFieldProps, ref: Ref<HTMLInputElement>) =>
 		required,
 		...rest
 	} = props;
+
+	const fieldID = useId(id, 'field-');
+
 	return (
 		<FieldPrimitive
 			label={label}
 			hasError={hasError || false}
 			link={link}
 			description={description}
 			id={id}
-			name={name}
 			hideLabel={hideLabel}
+			fieldId={fieldID}
+			name={name}
 			required={required}
 		>
-			<InputPrimitive {...rest} type={type} ref={ref} />
+			<InputPrimitive
+				{...rest}
+				id={fieldID}
+				type={type}
+				ref={ref}
+				hasError={hasError || false}
+				name={name}
+				required={required}
+			/>
 		</FieldPrimitive>
 	);
 });

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)) {
@@ -57,7 +60,7 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 				hasError={hasError || false}
 				link={link}
 				description={description}
-				id={id}
+				id={fieldID}
 				name={name}
 				hideLabel={hideLabel}
 				required={required}
@@ -66,7 +69,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}
@@ -86,10 +89,19 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 			description={description}
 			id={id}
 			name={name}
+			fieldId={fieldID}
 			hideLabel={hideLabel}
 			required={required}
 		>
-			<SelectField defaultValue={defaultValue} {...rest} />
+			<SelectField
+				defaultValue={defaultValue}
+				hasError={hasError || false}
+				name={name}
+				label={label}
+				required={required}
+				id={fieldID}
+				{...rest}
+			/>
 		</FieldPrimitive>
 	);
 });

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,18 +24,28 @@ const Textarea = forwardRef((props: InputTextareaProps, ref: Ref<HTMLTextAreaEle
 		children,
 		...rest
 	} = props;
+
+	const fieldID = useId(id, 'field-');
+
 	return (
 		<FieldPrimitive
 			label={label}
 			hasError={hasError || false}
 			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}
+				required={required}
+				id={fieldID}
+				ref={ref}
+			/>
 		</FieldPrimitive>
 	);
 });

packages/design-system/src/components/Form/Form.test.tsx

@@ -42,6 +42,7 @@ describe('Form', () => {
 				</Form>
 			</main>,
 		);
+
 		expect(container.firstChild).toMatchSnapshot();
 		const results = await axe(document.body);
 		expect(results).toHaveNoViolations();

packages/design-system/src/components/Form/Primitives/Field/Field.tsx

@@ -1,11 +1,10 @@
-import { cloneElement, forwardRef, ReactElement, Ref } from 'react';
+import { forwardRef, ReactElement, Ref } from 'react';
 
 import Link, { LinkProps } from '../../../Link/Link';
 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 =
 	| {
@@ -26,33 +25,32 @@ export type FieldPropsPrimitive = {
 	required?: boolean;
 } & FieldStatusProps;
 
-type FieldPropsPrimitiveWithChildren = FieldPropsPrimitive & { children: ReactElement };
+type FieldPropsPrimitiveWithChildren = FieldPropsPrimitive & {
+	children: ReactElement;
+	fieldId: string;
+};
 
 const Field = forwardRef(
 	(props: FieldPropsPrimitiveWithChildren, ref: Ref<HTMLInputElement | HTMLTextAreaElement>) => {
 		const {
 			children,
 			link,
-			id,
 			label,
-			name,
 			hasError = false,
 			hideLabel = false,
 			required = false,
 			description,
-			...rest
+			fieldId,
 		} = props;
 
-		const 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 = () => {
@@ -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>

packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -115,7 +115,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
@@ -229,7 +228,6 @@ exports[`Form should render a11y html 1`] = `
         <textarea
           class="theme-textarea"
           id="field--mocked-uuid-8"
-          name="textarea"
         />
       </div>
       <div
@@ -250,6 +248,7 @@ exports[`Form should render a11y html 1`] = `
             <select
               class="theme-select"
               id="field--mocked-uuid-9"
+              label="Select"
               name="select"
             >
               <option

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,