diff --git a/.changeset/mosaic-use-form-register-value.md b/.changeset/mosaic-use-form-register-value.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/mosaic-use-form-register-value.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/mosaic/src/components/form/index.ts b/packages/mosaic/src/components/form/index.ts index 9728b9ad829..0f83d14dade 100644 --- a/packages/mosaic/src/components/form/index.ts +++ b/packages/mosaic/src/components/form/index.ts @@ -3,9 +3,9 @@ export { FormSubmitError } from './form-submit-error'; export type { FieldFeedback, FieldFeedbackType, FormError, FormFieldErrors } from './form-submit-error'; export { useForm } from './use-form'; export type { - ControlledField, FormField, RegisteredField, + RegisteredValueField, TextFieldName, UseFormOptions, UseFormResult, diff --git a/packages/mosaic/src/components/form/use-form.test.ts b/packages/mosaic/src/components/form/use-form.test.ts index 0c7a11fbcf0..b985ee5539c 100644 --- a/packages/mosaic/src/components/form/use-form.test.ts +++ b/packages/mosaic/src/components/form/use-form.test.ts @@ -45,7 +45,7 @@ describe('useForm', () => { expectTypeOf(result.current.setValue).parameter(0).toEqualTypeOf<'username' | 'age'>(); expectTypeOf(result.current.touch).parameter(0).toEqualTypeOf<'username' | 'age'>(); expectTypeOf(result.current.register).parameter(0).toEqualTypeOf<'username'>(); - expectTypeOf(result.current.control).parameter(0).toEqualTypeOf<'username' | 'age'>(); + expectTypeOf(result.current.registerValue).parameter(0).toEqualTypeOf<'username' | 'age'>(); expectTypeOf(result.current.fields.age.feedback).toEqualTypeOf(); expectTypeOf(result.current.error).toEqualTypeOf(); expectTypeOf(result.current.reset).parameter(0).toEqualTypeOf<{ username: string; age: number } | undefined>(); @@ -582,13 +582,13 @@ describe('useForm', () => { it('controls a value-shaped field of any type with its name, value, value and blur handlers', () => { const { result } = renderHook(() => useForm({ initialValues: { code: '', count: 0 }, onSubmit: resolved })); - expect(result.current.control('count')).toMatchObject({ name: 'count', value: 0 }); - act(() => result.current.control('count').onValueChange(2)); + expect(result.current.registerValue('count')).toMatchObject({ name: 'count', value: 0 }); + act(() => result.current.registerValue('count').onValueChange(2)); expect(result.current.values.count).toBe(2); - act(() => result.current.control('code').onValueChange('123456')); - expect(result.current.control('code').value).toBe('123456'); + act(() => result.current.registerValue('code').onValueChange('123456')); + expect(result.current.registerValue('code').value).toBe('123456'); expect(result.current.fields.code.touched).toBe(false); - act(() => result.current.control('code').onBlur()); + act(() => result.current.registerValue('code').onBlur()); expect(result.current.fields.code.touched).toBe(true); }); diff --git a/packages/mosaic/src/components/form/use-form.ts b/packages/mosaic/src/components/form/use-form.ts index f3cb0a7082c..cdb82fd408f 100644 --- a/packages/mosaic/src/components/form/use-form.ts +++ b/packages/mosaic/src/components/form/use-form.ts @@ -35,7 +35,7 @@ export interface RegisteredField void; } -export interface ControlledField { +export interface RegisteredValueField { name: K; value: TValues[K]; onValueChange: (value: TValues[K]) => void; @@ -51,8 +51,25 @@ export interface UseFormResult { isSubmitting: boolean; isDirty: boolean; canSubmit: boolean; + /** + * Props for a control that takes `onChange(event)`, such as `` or `