From 9e0a661513af75d1b848e5be7a4916c53b78760f Mon Sep 17 00:00:00 2001 From: Marco Boninsegni Date: Wed, 2 Aug 2023 05:13:23 +0100 Subject: [PATCH 01/34] types: Align FormikHelpers and FieldHelper types to useFormik ones (#3843) This is yet another PR around TypeScript. The inferred types for the helpers in `useFormik` are the correct ones and should be used everywhere. See ``` export declare function useFormik({ validateOnChange, validateOnBlur, validateOnMount, isInitialValid, enableReinitialize, onSubmit, ...rest }: FormikConfig): { [...redacted for readability...] setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise> | Promise; setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise> | Promise; setFieldError: (field: string, value: string | undefined) => void; setStatus: (status: any) => void; setSubmitting: (isSubmitting: boolean) => void; setTouched: (touched: FormikTouched, shouldValidate?: boolean) => Promise> | Promise; setValues: (values: React.SetStateAction, shouldValidate?: boolean) => Promise> | Promise; submitForm: () => Promise; validateForm: (values?: Values) => Promise>; validateField: (name: string) => Promise | Promise; [...redacted for readability...] }; ``` Having the correct types, and the awaiting these helpers helps with otherwise possible race conditions when used in an imperative way, like so ``` const handleChange = ({ target }) => { await setFieldTouched('fieldName', true, false) await setFieldValue('fieldName', target.value, false) await validateField('fieldName') } ``` --- .changeset/nervous-flowers-rule.md | 5 +++++ docs/api/formik.md | 10 ++++++++-- docs/api/useField.md | 6 +++++- packages/formik/src/types.tsx | 12 ++++++------ 4 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 .changeset/nervous-flowers-rule.md diff --git a/.changeset/nervous-flowers-rule.md b/.changeset/nervous-flowers-rule.md new file mode 100644 index 000000000..032067e07 --- /dev/null +++ b/.changeset/nervous-flowers-rule.md @@ -0,0 +1,5 @@ +--- +'formik': patch +--- + +Fix FormikHelper and FieldHelperProps types diff --git a/docs/api/formik.md b/docs/api/formik.md index 0dfec7603..4da6b9ea2 100644 --- a/docs/api/formik.md +++ b/docs/api/formik.md @@ -177,11 +177,13 @@ Set `errors` imperatively. Set the error message of a field imperatively. `field` should match the key of `errors` you wish to update. Useful for creating custom input error handlers. -#### `setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void` +#### `setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => Promise` Set the touched state of a field imperatively. `field` should match the key of `touched` you wish to update. Useful for creating custom input blur handlers. Calling this method will trigger validation to run if `validateOnBlur` is set to `true` (which it is by default). `isTouched` defaults to `true` if not specified. You can also explicitly prevent/skip validation by passing a third argument as `false`. +If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + #### `submitForm: () => Promise` Trigger a form submission. The promise will be rejected if form is invalid. @@ -208,14 +210,18 @@ use it to pass API responses back into your component in `handleSubmit`. Set `isSubmitting` imperatively. You would call it with `setSubmitting(false)` in your `onSubmit` handler to finish the cycle. To learn more about the submission process, see [Form Submission](../guides/form-submission.md). -#### `setTouched: (fields: { [field: string]: boolean }, shouldValidate?: boolean) => void` +#### `setTouched: (fields: { [field: string]: boolean }, shouldValidate?: boolean) => Promise` Set `touched` imperatively. Calling this will trigger validation to run if `validateOnBlur` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. +If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + #### `setValues: (fields: React.SetStateAction<{ [field: string]: any }>, shouldValidate?: boolean) => void` Set `values` imperatively. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. +If `validateOnChange` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + #### `status?: any` A top-level status object that you can use to represent form state that can't diff --git a/docs/api/useField.md b/docs/api/useField.md index b9065b432..e5e3dd6aa 100644 --- a/docs/api/useField.md +++ b/docs/api/useField.md @@ -159,6 +159,10 @@ An object that contains relevant computed metadata about a field. More specifica An object that contains helper functions which you can use to imperatively change the value, error value or touched status for the field in question. This is useful for components which need to change a field's status directly, without triggering change or blur events. -- `setValue(value: any, shouldValidate?: boolean): void` - A function to change the field's value. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. +- `setValue(value: any, shouldValidate?: boolean): Promise` - A function to change the field's value. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. +If `validateOnChange` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + - `setTouched(value: boolean, shouldValidate?: boolean): void` - A function to change the field's touched status. Calling this will trigger validation to run if `validateOnBlur` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. +If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + - `setError(value: any): void` - A function to change the field's error value diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx index 9586fe865..71db6792c 100644 --- a/packages/formik/src/types.tsx +++ b/packages/formik/src/types.tsx @@ -86,12 +86,12 @@ export interface FormikHelpers { setTouched: ( touched: FormikTouched, shouldValidate?: boolean - ) => void; + ) => Promise>; /** Manually set values object */ setValues: ( values: React.SetStateAction, shouldValidate?: boolean - ) => void; + ) => Promise>; /** Set value of form field directly */ setFieldValue: ( field: string, @@ -105,11 +105,11 @@ export interface FormikHelpers { field: string, isTouched?: boolean, shouldValidate?: boolean - ) => void; + ) => Promise>; /** Validate form values */ validateForm: (values?: any) => Promise>; /** Validate field value */ - validateField: (field: string) => void; + validateField: (field: string) => Promise | Promise; /** Reset form */ resetForm: (nextState?: Partial>) => void; /** Submit the form imperatively */ @@ -302,9 +302,9 @@ export interface FieldMetaProps { /** Imperative handles to change a field's value, error and touched */ export interface FieldHelperProps { /** Set the field's value */ - setValue: (value: Value, shouldValidate?: boolean) => void; + setValue: (value: Value, shouldValidate?: boolean) => Promise>; /** Set the field's touched value */ - setTouched: (value: boolean, shouldValidate?: boolean) => void; + setTouched: (value: boolean, shouldValidate?: boolean) => Promise>; /** Set the field's error value */ setError: (value: string | undefined) => void; } From 704da499bdeb0afc8aa2a8fc5de11e1b3efe7511 Mon Sep 17 00:00:00 2001 From: vennilamahalingam <33494788+vennilamahalingam@users.noreply.github.com> Date: Wed, 2 Aug 2023 09:46:03 +0530 Subject: [PATCH 02/34] Fixing distorted UI of footer 'Notify me' Button (#3851) https://github.com/jaredpalmer/formik/issues/3737 --- website/src/components/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index f4e90214f..ff2b01f2f 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -170,7 +170,7 @@ export const Footer: React.FC = props => {
Date: Wed, 2 Aug 2023 04:52:07 +0000 Subject: [PATCH 03/34] Version Packages (#3855) This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## formik@2.4.3 ### Patch Changes - [`9e0a661`](https://github.com/jaredpalmer/formik/commit/9e0a661513af75d1b848e5be7a4916c53b78760f) [#3843](https://github.com/jaredpalmer/formik/pull/3843) Thanks [@bonimba](https://github.com/bonimba)! - Fix FormikHelper and FieldHelperProps types ## formik-native@2.1.26 ### Patch Changes - Updated dependencies \[[`9e0a661`](https://github.com/jaredpalmer/formik/commit/9e0a661513af75d1b848e5be7a4916c53b78760f)]: - formik@2.4.3 --- .changeset/nervous-flowers-rule.md | 5 ----- packages/formik-native/CHANGELOG.md | 7 +++++++ packages/formik-native/package.json | 4 ++-- packages/formik/CHANGELOG.md | 6 ++++++ packages/formik/package.json | 6 ++---- 5 files changed, 17 insertions(+), 11 deletions(-) delete mode 100644 .changeset/nervous-flowers-rule.md diff --git a/.changeset/nervous-flowers-rule.md b/.changeset/nervous-flowers-rule.md deleted file mode 100644 index 032067e07..000000000 --- a/.changeset/nervous-flowers-rule.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'formik': patch ---- - -Fix FormikHelper and FieldHelperProps types diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md index 3f9f825ea..3b432476b 100644 --- a/packages/formik-native/CHANGELOG.md +++ b/packages/formik-native/CHANGELOG.md @@ -1,5 +1,12 @@ # formik-native +## 2.1.26 + +### Patch Changes + +- Updated dependencies [[`9e0a661`](https://github.com/jaredpalmer/formik/commit/9e0a661513af75d1b848e5be7a4916c53b78760f)]: + - formik@2.4.3 + ## 2.1.25 ### Patch Changes diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json index a67f583e0..ed8dc453a 100644 --- a/packages/formik-native/package.json +++ b/packages/formik-native/package.json @@ -1,6 +1,6 @@ { "name": "formik-native", - "version": "2.1.25", + "version": "2.1.26", "license": "Apache-2.0", "author": "Jared Palmer ", "repository": "formium/formik", @@ -30,7 +30,7 @@ "react": ">=16.8.0" }, "dependencies": { - "formik": "2.4.2" + "formik": "2.4.3" }, "devDependencies": { "@react-native-community/eslint-config": "^0.0.5", diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md index 1710bc3ac..99533c25e 100644 --- a/packages/formik/CHANGELOG.md +++ b/packages/formik/CHANGELOG.md @@ -1,5 +1,11 @@ # formik +## 2.4.3 + +### Patch Changes + +- [`9e0a661`](https://github.com/jaredpalmer/formik/commit/9e0a661513af75d1b848e5be7a4916c53b78760f) [#3843](https://github.com/jaredpalmer/formik/pull/3843) Thanks [@bonimba](https://github.com/bonimba)! - Fix FormikHelper and FieldHelperProps types + ## 2.4.2 ### Patch Changes diff --git a/packages/formik/package.json b/packages/formik/package.json index 555893551..a1e78e810 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -1,7 +1,7 @@ { "name": "formik", "description": "Build forms in React, without the tears", - "version": "2.4.2", + "version": "2.4.3", "license": "Apache-2.0", "author": "Jared Palmer (https://jaredpalmer.com)", "contributors": [ @@ -33,9 +33,7 @@ "umd:main": "dist/formik.umd.production.js", "module": "dist/formik.esm.js", "typings": "dist/index.d.ts", - "files": [ - "dist" - ], + "files": ["dist"], "peerDependencies": { "react": ">=16.8.0" }, From 41720c2f69407e41c27b325923bce63436b07f45 Mon Sep 17 00:00:00 2001 From: Yazalde Filimone Date: Fri, 11 Aug 2023 03:17:51 +0200 Subject: [PATCH 04/34] Feat/support custom field component, (#3858) (#3862) --- .vscode/settings.json | 6 +++++- packages/formik/src/Field.tsx | 31 ++++++++++++++++------------- packages/formik/test/Field.test.tsx | 20 ++++++++++++++++++- 3 files changed, 41 insertions(+), 16 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 25fa6215f..e56b4cfc8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,7 @@ { - "typescript.tsdk": "node_modules/typescript/lib" + "typescript.tsdk": "node_modules/typescript/lib", + "editor.formatOnSave": false, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, } diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx index 9eb851b25..5e33d8331 100644 --- a/packages/formik/src/Field.tsx +++ b/packages/formik/src/Field.tsx @@ -22,19 +22,19 @@ export interface FieldConfig { * Field component to render. Can either be a string like 'select' or a component. */ component?: - | string - | React.ComponentType> - | React.ComponentType - | React.ForwardRefExoticComponent; + | string + | React.ComponentType> + | React.ComponentType + | React.ForwardRefExoticComponent; /** * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component. */ as?: - | React.ComponentType['field']> - | string - | React.ComponentType - | React.ForwardRefExoticComponent; + | React.ComponentType['field']> + | string + | React.ComponentType + | React.ForwardRefExoticComponent; /** * Render prop (works like React router's } />) @@ -72,9 +72,11 @@ export interface FieldConfig { innerRef?: (instance: any) => void; } -export type FieldAttributes = GenericFieldHTMLAttributes & +export type FieldAttributes = { className?: string; } & GenericFieldHTMLAttributes & FieldConfig & - T & { name: string }; + T & { + name: string, + }; export type FieldHookConfig = GenericFieldHTMLAttributes & FieldConfig; @@ -139,6 +141,7 @@ export function Field({ children, as: is, // `as` is reserved in typescript lol component, + className, ...props }: FieldAttributes) { const { @@ -202,14 +205,14 @@ export function Field({ const { innerRef, ...rest } = props; return React.createElement( component, - { ref: innerRef, ...field, ...rest }, + { ref: innerRef, ...field, ...rest, className }, children ); } // We don't pass `meta` for backwards compat return React.createElement( component, - { field, form: formik, ...props }, + { field, form: formik, ...props, className }, children ); } @@ -221,10 +224,10 @@ export function Field({ const { innerRef, ...rest } = props; return React.createElement( asElement, - { ref: innerRef, ...field, ...rest }, + { ref: innerRef, ...field, ...rest, className }, children ); } - return React.createElement(asElement, { ...field, ...props }, children); + return React.createElement(asElement, { ...field, ...props, className }, children); } diff --git a/packages/formik/test/Field.test.tsx b/packages/formik/test/Field.test.tsx index 03b03eb7b..9103f982e 100644 --- a/packages/formik/test/Field.test.tsx +++ b/packages/formik/test/Field.test.tsx @@ -100,8 +100,10 @@ describe('Field / FastField', () => { describe('renders an by default', () => { it('', () => { - const { container } = renderForm(); + const className = 'field-custom' + const { container } = renderForm(); expect(container.querySelectorAll('input')).toHaveLength(1); + expect(container.querySelector(`.${className}`)?.getAttribute('value')).toEqual('jared') }); it('', () => { @@ -110,6 +112,22 @@ describe('Field / FastField', () => { }); }); + describe('renders an with className', () => { + it('', () => { + const className = 'field-custom' + const { container } = renderForm(); + expect(container.querySelectorAll(`.${className}`)).toHaveLength(1) + expect(container.querySelector(`.${className}`)?.getAttribute('value')).toEqual('jared') + }); + + it('', () => { + const className = 'field-custom' + const { container } = renderForm(); + expect(container.querySelectorAll(`.${className}`)).toHaveLength(1) + expect(container.querySelector(`.${className}`)?.getAttribute('value')).toEqual('jared') + }); + }); + describe('receives { field, form, meta } props and renders element', () => { it('', () => { let injected: FieldProps[] = []; From 305f3197703c8f873072890a6efcb6df5316d6f2 Mon Sep 17 00:00:00 2001 From: Davide Francescon Date: Mon, 21 Aug 2023 11:16:44 +0200 Subject: [PATCH 05/34] fix: return type of setValue in docs did not match the function typing --- docs/api/formik.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/formik.md b/docs/api/formik.md index 4da6b9ea2..09c0c159b 100644 --- a/docs/api/formik.md +++ b/docs/api/formik.md @@ -216,7 +216,7 @@ Set `touched` imperatively. Calling this will trigger validation to run if `vali If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`. -#### `setValues: (fields: React.SetStateAction<{ [field: string]: any }>, shouldValidate?: boolean) => void` +#### `setValues: (fields: React.SetStateAction<{ [field: string]: any }>, shouldValidate?: boolean) => Promise>` Set `values` imperatively. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. From 5c01ee77b312ff6c375d43f841fe9fbe5846ebd9 Mon Sep 17 00:00:00 2001 From: Raj Patel <83405614+rajpatelbot@users.noreply.github.com> Date: Fri, 1 Sep 2023 01:55:06 +0530 Subject: [PATCH 06/34] FIX: Fixed resetForm function dependency issue (#3872) Closes: #3861 As i mentioned in the issue section that the unexpected behaviour is comming while using resetForm function due to missing dependency. Here is the fix. --- packages/formik/src/Formik.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx index db627821d..cd17adcd4 100755 --- a/packages/formik/src/Formik.tsx +++ b/packages/formik/src/Formik.tsx @@ -417,7 +417,7 @@ export function useFormik({ dispatchFn(); } }, - [props.initialErrors, props.initialStatus, props.initialTouched] + [props.initialErrors, props.initialStatus, props.initialTouched, props.onReset] ); React.useEffect(() => { From 0e476bdf860e48237b5e0e226412edc253590b40 Mon Sep 17 00:00:00 2001 From: vennilamahalingam <33494788+vennilamahalingam@users.noreply.github.com> Date: Sat, 2 Sep 2023 17:34:35 +0530 Subject: [PATCH 07/34] To fix the navbar highlight. (#3856) https://github.com/jaredpalmer/formik/issues/3854 --- website/src/pages/docs/[...slug].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/docs/[...slug].tsx b/website/src/pages/docs/[...slug].tsx index 314b5f7d2..2394029a2 100644 --- a/website/src/pages/docs/[...slug].tsx +++ b/website/src/pages/docs/[...slug].tsx @@ -223,7 +223,7 @@ function SidebarRoutes({ const href = '/docs/[...slug]'; const pagePath = removeFromLast(path!, '.'); const pathname = addTagToSlug(pagePath, tag); - const selected = slug.startsWith(pagePath); + const selected = (slug === pagePath); const route = { href, path, title, pathname, selected }; return ( Date: Sat, 2 Sep 2023 06:11:26 -0600 Subject: [PATCH 08/34] Fix deprecated type in React 18 (#3547) Replace StatelessComponent by FunctionComponent in withFormik.tsx fix #3546 PR to solve the problem with the removed type in react 18 I saw that you have a build/types branch, but it hasn't changed since 2020, so I did the direct PR in master From 07d8cc5bcdb2d6732193a5c4117fbe864dd5bb3d Mon Sep 17 00:00:00 2001 From: Sean Nessworthy Date: Wed, 6 Sep 2023 16:40:57 +0100 Subject: [PATCH 09/34] docs: Expand on cleanup behaviour for submission handlers Cover use cases for both using a submission handler that returns a promise, and for a one which does not. Add FAQ entry about submission handler cleanup. --- docs/guides/form-submission.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/guides/form-submission.md b/docs/guides/form-submission.md index 6c0ea4e2a..9762e11fb 100644 --- a/docs/guides/form-submission.md +++ b/docs/guides/form-submission.md @@ -23,8 +23,10 @@ To submit a form in Formik, you need to somehow fire off the provided `handleSub ### Submission -- Proceed with running your submission handler (i.e.`onSubmit` or `handleSubmit`) -- _you call `setSubmitting(false)`_ in your handler to finish the cycle +- Proceed with running your submission handler (i.e. `onSubmit` or `handleSubmit`) +- Did the submit handler return a promise? + - Yes: Wait until it is resolved or rejected, then set `setSubmitting` to `false` + - No: _You call `setSubmitting(false)`_ in your handler to finish the cycle ## Frequently Asked Questions @@ -55,3 +57,8 @@ Disable whatever is triggering submission if `isSubmitting` is `true`. If `isValidating` is `true` and `isSubmitting` is `true`. +Why does `isSubmitting` remain `true` after submission? +
+ If the submission handler is returning a promise, make sure the promise has resolved or rejected. + If the submission handler is not returning a promise, make sure `setSubmitting(false)` is called at the end of the handler. +
From b3190f25268d0496b2448db6f2cc02599f8914f2 Mon Sep 17 00:00:00 2001 From: Sean Nessworthy Date: Wed, 6 Sep 2023 16:48:00 +0100 Subject: [PATCH 10/34] docs: Adjust language for submission cleanup --- docs/guides/form-submission.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/form-submission.md b/docs/guides/form-submission.md index 9762e11fb..6032840f4 100644 --- a/docs/guides/form-submission.md +++ b/docs/guides/form-submission.md @@ -59,6 +59,6 @@ If `isValidating` is `true` and `isSubmitting` is `true`. Why does `isSubmitting` remain `true` after submission?
- If the submission handler is returning a promise, make sure the promise has resolved or rejected. - If the submission handler is not returning a promise, make sure `setSubmitting(false)` is called at the end of the handler. + If the submission handler returns a promise, make sure it is correctly resolved or rejected when called. + If the submission handler does not return a promise, make sure `setSubmitting(false)` is called at the end of the handler.
From 868b8f09945f98ce36e00a54ee875aee0d4d747b Mon Sep 17 00:00:00 2001 From: Sean Nessworthy Date: Wed, 6 Sep 2023 16:50:07 +0100 Subject: [PATCH 11/34] docs: Fix `isSubmitting` FAQ entry Wrap FAQ entry in `details correctly. Remove use of inline code markers in `summary` as it seems like they are not supported. --- docs/guides/form-submission.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/guides/form-submission.md b/docs/guides/form-submission.md index 6032840f4..a7520195e 100644 --- a/docs/guides/form-submission.md +++ b/docs/guides/form-submission.md @@ -57,8 +57,9 @@ Disable whatever is triggering submission if `isSubmitting` is `true`. If `isValidating` is `true` and `isSubmitting` is `true`. -Why does `isSubmitting` remain `true` after submission? +
+Why does isSubmitting remain true after submission? If the submission handler returns a promise, make sure it is correctly resolved or rejected when called. If the submission handler does not return a promise, make sure `setSubmitting(false)` is called at the end of the handler.
From a235013585ffb6a49863f2b6195b669da4a0f3a9 Mon Sep 17 00:00:00 2001 From: Sean Nessworthy Date: Wed, 6 Sep 2023 16:52:13 +0100 Subject: [PATCH 12/34] docs: Fix incorrect submission FAQ formatting Add spacing between lines to support proper inline code formatting. --- docs/guides/form-submission.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/guides/form-submission.md b/docs/guides/form-submission.md index a7520195e..de84edfc0 100644 --- a/docs/guides/form-submission.md +++ b/docs/guides/form-submission.md @@ -60,6 +60,9 @@ If `isValidating` is `true` and `isSubmitting` is `true`.
Why does isSubmitting remain true after submission? - If the submission handler returns a promise, make sure it is correctly resolved or rejected when called. - If the submission handler does not return a promise, make sure `setSubmitting(false)` is called at the end of the handler. + +If the submission handler returns a promise, make sure it is correctly resolved or rejected when called. + +If the submission handler does not return a promise, make sure `setSubmitting(false)` is called at the end of the handler. +
From ae0fe6cbd11f2d2664142008225abc237b5bff82 Mon Sep 17 00:00:00 2001 From: Evan Jacobs <570070+probablyup@users.noreply.github.com> Date: Wed, 6 Sep 2023 18:24:03 -0400 Subject: [PATCH 13/34] chore: add missing changesets (#3873) --- .changeset/config.json | 2 +- .changeset/fuzzy-steaks-admire.md | 5 +++++ .changeset/mighty-colts-compare.md | 5 +++++ 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/fuzzy-steaks-admire.md create mode 100644 .changeset/mighty-colts-compare.md diff --git a/.changeset/config.json b/.changeset/config.json index bc9a7d413..4f393048f 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -4,7 +4,7 @@ "commit": false, "linked": [], "access": "public", - "baseBranch": "master", + "baseBranch": "main", "updateInternalDependencies": "patch", "ignore": [] } diff --git a/.changeset/fuzzy-steaks-admire.md b/.changeset/fuzzy-steaks-admire.md new file mode 100644 index 000000000..df4384547 --- /dev/null +++ b/.changeset/fuzzy-steaks-admire.md @@ -0,0 +1,5 @@ +--- +'formik': patch +--- + +Forward `className` for custom components used with `Field` 41720c2 diff --git a/.changeset/mighty-colts-compare.md b/.changeset/mighty-colts-compare.md new file mode 100644 index 000000000..81fb29e13 --- /dev/null +++ b/.changeset/mighty-colts-compare.md @@ -0,0 +1,5 @@ +--- +'formik': patch +--- + +Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` (da58b29) From 34240fd174bc2dd6d1e9f16ae9329e67a49ba307 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 6 Sep 2023 23:36:51 +0000 Subject: [PATCH 14/34] Version Packages (#3877) This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## formik@2.4.4 ### Patch Changes - [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82) [#3873](https://github.com/jaredpalmer/formik/pull/3873) - Forward `className` for custom components used with `Field` 41720c2 - [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82) [#3873](https://github.com/jaredpalmer/formik/pull/3873) - Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` (da58b29) ## formik-native@2.1.27 ### Patch Changes - Updated dependencies \[[`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82), [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82)]: - formik@2.4.4 --- .changeset/fuzzy-steaks-admire.md | 5 ----- .changeset/mighty-colts-compare.md | 5 ----- packages/formik-native/CHANGELOG.md | 7 +++++++ packages/formik-native/package.json | 4 ++-- packages/formik/CHANGELOG.md | 8 ++++++++ packages/formik/package.json | 2 +- 6 files changed, 18 insertions(+), 13 deletions(-) delete mode 100644 .changeset/fuzzy-steaks-admire.md delete mode 100644 .changeset/mighty-colts-compare.md diff --git a/.changeset/fuzzy-steaks-admire.md b/.changeset/fuzzy-steaks-admire.md deleted file mode 100644 index df4384547..000000000 --- a/.changeset/fuzzy-steaks-admire.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'formik': patch ---- - -Forward `className` for custom components used with `Field` 41720c2 diff --git a/.changeset/mighty-colts-compare.md b/.changeset/mighty-colts-compare.md deleted file mode 100644 index 81fb29e13..000000000 --- a/.changeset/mighty-colts-compare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'formik': patch ---- - -Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` (da58b29) diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md index 3b432476b..93820b963 100644 --- a/packages/formik-native/CHANGELOG.md +++ b/packages/formik-native/CHANGELOG.md @@ -1,5 +1,12 @@ # formik-native +## 2.1.27 + +### Patch Changes + +- Updated dependencies [[`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82), [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82)]: + - formik@2.4.4 + ## 2.1.26 ### Patch Changes diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json index ed8dc453a..0590c9a78 100644 --- a/packages/formik-native/package.json +++ b/packages/formik-native/package.json @@ -1,6 +1,6 @@ { "name": "formik-native", - "version": "2.1.26", + "version": "2.1.27", "license": "Apache-2.0", "author": "Jared Palmer ", "repository": "formium/formik", @@ -30,7 +30,7 @@ "react": ">=16.8.0" }, "dependencies": { - "formik": "2.4.3" + "formik": "2.4.4" }, "devDependencies": { "@react-native-community/eslint-config": "^0.0.5", diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md index 99533c25e..c7cb04a51 100644 --- a/packages/formik/CHANGELOG.md +++ b/packages/formik/CHANGELOG.md @@ -1,5 +1,13 @@ # formik +## 2.4.4 + +### Patch Changes + +- [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82) [#3873](https://github.com/jaredpalmer/formik/pull/3873) Thanks [@probablyup](https://github.com/probablyup)! - Forward `className` for custom components used with `Field` 41720c2 + +* [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82) [#3873](https://github.com/jaredpalmer/formik/pull/3873) Thanks [@probablyup](https://github.com/probablyup)! - Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` (da58b29) + ## 2.4.3 ### Patch Changes diff --git a/packages/formik/package.json b/packages/formik/package.json index a1e78e810..d991b48ca 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -1,7 +1,7 @@ { "name": "formik", "description": "Build forms in React, without the tears", - "version": "2.4.3", + "version": "2.4.4", "license": "Apache-2.0", "author": "Jared Palmer (https://jaredpalmer.com)", "contributors": [ From ec89b3a7d1665fb4b086ffaee8cbd11b4f2ab986 Mon Sep 17 00:00:00 2001 From: Evan Jacobs <570070+probablyup@users.noreply.github.com> Date: Thu, 7 Sep 2023 08:04:54 -0400 Subject: [PATCH 15/34] chore: update CHANGELOG.md (#3878) Already fixed the release summary to reflect the true contributors/commits, the change history got a little muddy due to submitting the changesets separately. --- packages/formik/CHANGELOG.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md index c7cb04a51..6c40ea435 100644 --- a/packages/formik/CHANGELOG.md +++ b/packages/formik/CHANGELOG.md @@ -4,9 +4,12 @@ ### Patch Changes -- [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82) [#3873](https://github.com/jaredpalmer/formik/pull/3873) Thanks [@probablyup](https://github.com/probablyup)! - Forward `className` for custom components used with `Field` 41720c2 +- [`41720c2`](https://github.com/jaredpalmer/formik/commit/41720c2f69407e41c27b325923bce63436b07f45) [#3862](https://github.com/jaredpalmer/formik/pull/3862) Thanks @yazaldefilimonepinto! - Forward `className` for custom components used with `Field` + +- [`da58b29`](https://github.com/jaredpalmer/formik/commit/da58b292c9c0b6029ae21ab4b5edff09dd877c1b) [#3858](https://github.com/jaredpalmer/formik/pull/3858) Thanks @alaanescobedo! - Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` + +- [`5c01ee7`](https://github.com/jaredpalmer/formik/commit/5c01ee77b312ff6c375d43f841fe9fbe5846ebd9) [#3872](https://github.com/jaredpalmer/formik/pull/3872) Thanks @rajpatelbot! - FIX: Fixed resetForm function dependency issue -* [`ae0fe6c`](https://github.com/jaredpalmer/formik/commit/ae0fe6cbd11f2d2664142008225abc237b5bff82) [#3873](https://github.com/jaredpalmer/formik/pull/3873) Thanks [@probablyup](https://github.com/probablyup)! - Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` (da58b29) ## 2.4.3 From 09f68a77366e761304abdca787622ba3a1bc5a01 Mon Sep 17 00:00:00 2001 From: Evan Jacobs <570070+probablyup@users.noreply.github.com> Date: Fri, 8 Sep 2023 09:53:49 -0400 Subject: [PATCH 16/34] chore: more impersonal language --- docs/guides/form-submission.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/form-submission.md b/docs/guides/form-submission.md index de84edfc0..fe359488b 100644 --- a/docs/guides/form-submission.md +++ b/docs/guides/form-submission.md @@ -23,10 +23,10 @@ To submit a form in Formik, you need to somehow fire off the provided `handleSub ### Submission -- Proceed with running your submission handler (i.e. `onSubmit` or `handleSubmit`) +- Proceed with running the submission handler (i.e. `onSubmit` or `handleSubmit`) - Did the submit handler return a promise? - Yes: Wait until it is resolved or rejected, then set `setSubmitting` to `false` - - No: _You call `setSubmitting(false)`_ in your handler to finish the cycle + - No: _Call `setSubmitting(false)`_ to finish the cycle ## Frequently Asked Questions @@ -59,7 +59,7 @@ If `isValidating` is `true` and `isSubmitting` is `true`.
-Why does isSubmitting remain true after submission? +Why does `isSubmitting` remain true after submission? If the submission handler returns a promise, make sure it is correctly resolved or rejected when called. From aa1cf43fccbccec1467a6eeca85d37b398c99ec2 Mon Sep 17 00:00:00 2001 From: Fuad Herac Date: Mon, 11 Sep 2023 16:17:55 +0200 Subject: [PATCH 17/34] #2594: Remove the duplicate word from the blog post (#3703) - Link to the issue: [#2594](https://github.com/jaredpalmer/formik/issues/2594) - Screenshot: Screenshot 2022-12-20 at 19 02 15 --- website/src/blog/new-docs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/blog/new-docs.md b/website/src/blog/new-docs.md index 9d0be2303..6a2aa8d41 100644 --- a/website/src/blog/new-docs.md +++ b/website/src/blog/new-docs.md @@ -117,7 +117,7 @@ I accidentally discovered the new version of docsearch.js while working on the d ![/images/blog/algolia-docsearch-screenshot.png](/images/blog/algolia-docsearch-screenshot.png) -Overall, I'm pretty happy with the new docs site. For the first time in a while, I'm excited to write docs again. There's still a decent amount of features still missing, but I'm very happy with the end-user experience and the developer experience that this stack provides. Next.js gives us a great foundation for building more app-like features into the docs site. The first of these will be a brand new interactive tutorial as well as a new searchable example and boilerplate directory. As always, if you're if you're interested helping out or diving deeper, the [full source code of the new docs is available on GitHub](https://github.com/formik/formik). +Overall, I'm pretty happy with the new docs site. For the first time in a while, I'm excited to write docs again. There's still a decent amount of features still missing, but I'm very happy with the end-user experience and the developer experience that this stack provides. Next.js gives us a great foundation for building more app-like features into the docs site. The first of these will be a brand new interactive tutorial as well as a new searchable example and boilerplate directory. As always, if you're interested helping out or diving deeper, the [full source code of the new docs is available on GitHub](https://github.com/formik/formik). So with that, go poke around, but be gentle. If you find any bugs, [file an issue.](https://github.com/formik/formik/issues/new?template=Bug_report.md) With this new Notion-powered blog, I'll be posting a lot more often, so enter your email and slap that subscribe button in the footer to join the Formik mailing list. From fe4ed7e048b14331a75e40cabf48e4787d9b2b71 Mon Sep 17 00:00:00 2001 From: Marks Polakovs Date: Mon, 11 Sep 2023 15:21:37 +0100 Subject: [PATCH 18/34] Mark `formik` as side-effect free (#3501) This will allow Formik's code to be removed by tree-shaking bundlers like Webpack or esbuild. --- .changeset/wise-games-battle.md | 5 +++++ packages/formik/package.json | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/wise-games-battle.md diff --git a/.changeset/wise-games-battle.md b/.changeset/wise-games-battle.md new file mode 100644 index 000000000..14e2abe54 --- /dev/null +++ b/.changeset/wise-games-battle.md @@ -0,0 +1,5 @@ +--- +"formik": patch +--- + +Mark `formik` as side-effect free in `package.json` diff --git a/packages/formik/package.json b/packages/formik/package.json index d991b48ca..37c47935d 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -37,6 +37,7 @@ "peerDependencies": { "react": ">=16.8.0" }, + "sideEffects": false, "scripts": { "test": "tsdx test --env=jsdom", "test:watch": "npm run test -- --watchAll", From 5edbd856a13b3a61449b13d4e453c15bd543a177 Mon Sep 17 00:00:00 2001 From: Evan Jacobs <570070+probablyup@users.noreply.github.com> Date: Thu, 14 Sep 2023 12:36:23 -0400 Subject: [PATCH 19/34] chore: skip actions if source files have not changed (#3880) * chore: skip benchmark action if source files have not changed * chore: test alternate strategy * chore: standardize around nvmrc file * chore: try shared setup * chore: watch for relevant changes * chore: consolidate workflows * chore: normalize names --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .github/workflows/benchmark.yml | 60 ------------ .github/workflows/ci.yml | 152 +++++++++++++++++++++++++++++++ .github/workflows/playwright.yml | 45 --------- .github/workflows/release.yml | 2 +- .github/workflows/size.yml | 16 ---- .github/workflows/test.yml | 37 -------- .nvmrc | 1 + 7 files changed, 154 insertions(+), 159 deletions(-) delete mode 100644 .github/workflows/benchmark.yml create mode 100644 .github/workflows/ci.yml delete mode 100644 .github/workflows/playwright.yml delete mode 100644 .github/workflows/size.yml delete mode 100644 .github/workflows/test.yml create mode 100644 .nvmrc diff --git a/.github/workflows/benchmark.yml b/.github/workflows/benchmark.yml deleted file mode 100644 index 0d3976027..000000000 --- a/.github/workflows/benchmark.yml +++ /dev/null @@ -1,60 +0,0 @@ -name: Performance - -on: - pull_request: - push: - branches: [main] - -jobs: - benchmark: - runs-on: ubuntu-latest - - strategy: - fail-fast: false - matrix: - node: ['18.x'] - - name: Test on node ${{ matrix.node }} - - steps: - - uses: actions/checkout@v3 - - - name: Use Node.js ${{ matrix.node }} - uses: actions/setup-node@v3 - with: - cache: yarn - node-version: ${{ matrix.node }} - - - name: Install & build - run: | - node --version - npm --version - yarn --version - yarn install --frozen-lockfile - yarn build:benchmark - - - name: Download previous benchmark data - uses: actions/cache@v3 - with: - path: ./benchmark-cache - key: ${{ runner.os }}-benchmark - - - name: Run benchmark - run: yarn benchmark - - - name: Store benchmark result - uses: benchmark-action/github-action-benchmark@v1 - with: - tool: benchmarkjs - external-data-json-path: ./benchmark-cache/benchmark-data.json - output-file-path: output.txt - # comment for PRs that's updated with current perf relative to baseline (main) - summary-always: true - # warn if slowness is detected; might be transient on rerun - alert-threshold: 110% - comment-on-alert: true - fail-on-alert: true - # if things get considerably slower, deny the PR - fail-threshold: 120% - # needed for commenting on PRs - github-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 000000000..9a36bf0fb --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,152 @@ +name: ci + +on: + pull_request: + push: + branches: [main] + +jobs: + detectChangedSourceFiles: + name: 'determine changes' + runs-on: ubuntu-latest + outputs: + changes: ${{ steps.changed-files-yaml.outputs.src_any_changed }} + steps: + - uses: actions/checkout@v3 + - name: Detect changed files + id: changed-files-yaml + uses: tj-actions/changed-files@v39 + with: + files_yaml: | + src: + - packages/formik/src/** + - packages/formik/package.json + - packages/formik-native/src/** + - packages/formik-native/package.json + benchmark: + if: needs.detectChangedSourceFiles.outputs.changes == 'true' + runs-on: ubuntu-latest + strategy: + fail-fast: false + steps: + - uses: actions/checkout@v3 + + - uses: actions/setup-node@v3 + with: + cache: yarn + node-version-file: .nvmrc + + - name: Detect changed files + id: changed-files-yaml + uses: tj-actions/changed-files@v39 + with: + files_yaml: | + src: + - packages/formik/src/** + - packages/formik-native/src/** + + - name: Install & build + run: | + node --version + npm --version + yarn --version + yarn install --frozen-lockfile + yarn build:benchmark + + - name: Download previous benchmark data + uses: actions/cache@v3 + with: + path: ./benchmark-cache + key: ${{ runner.os }}-benchmark + + - name: Run benchmark + run: yarn benchmark + + - name: Store benchmark result + uses: benchmark-action/github-action-benchmark@v1 + with: + tool: benchmarkjs + external-data-json-path: ./benchmark-cache/benchmark-data.json + output-file-path: output.txt + # comment for PRs that's updated with current perf relative to baseline (main) + summary-always: true + # warn if slowness is detected; might be transient on rerun + alert-threshold: 110% + comment-on-alert: true + fail-on-alert: true + # if things get considerably slower, deny the PR + fail-threshold: 120% + # needed for commenting on PRs + github-token: ${{ secrets.GITHUB_TOKEN }} + interaction: + if: needs.detectChangedSourceFiles.outputs.changes == 'true' + timeout-minutes: 10 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + cache: yarn + node-version-file: .nvmrc + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Get installed Playwright version + id: playwright-version + run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV + + - name: Cache playwright binaries + uses: actions/cache@v3 + id: playwright-cache + with: + path: | + ~/.cache/ms-playwright + key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }} + + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + if: steps.playwright-cache.outputs.cache-hit != 'true' + - run: yarn playwright install-deps + if: steps.playwright-cache.outputs.cache-hit != 'true' + + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 5 + size: + if: needs.detectChangedSourceFiles.outputs.changes == 'true' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 1 + - uses: preactjs/compressed-size-action@v2 + with: + repo-token: '${{ secrets.GITHUB_TOKEN }}' + build-script: 'turbo run build --filter {./packages/*}...' + unit: + if: needs.detectChangedSourceFiles.outputs.changes == 'true' + runs-on: ubuntu-latest + strategy: + fail-fast: false + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + cache: yarn + node-version-file: .nvmrc + - name: Install deps, build, and test + run: | + node --version + npm --version + yarn --version + yarn install --frozen-lockfile + yarn test --coverage + env: + CI: true + NODE_OPTIONS: --max-old-space-size=4096 \ No newline at end of file diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml deleted file mode 100644 index a720fa902..000000000 --- a/.github/workflows/playwright.yml +++ /dev/null @@ -1,45 +0,0 @@ -name: Playwright Tests -on: - push: - branches: [main] - pull_request: -jobs: - test: - timeout-minutes: 10 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - cache: yarn - node-version: 18 - - - name: Install dependencies - run: yarn install --frozen-lockfile - - - name: Get installed Playwright version - id: playwright-version - run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').dependencies['@playwright/test'].version)")" >> $GITHUB_ENV - - - name: Cache playwright binaries - uses: actions/cache@v3 - id: playwright-cache - with: - path: | - ~/.cache/ms-playwright - key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }} - - - name: Install Playwright Browsers - run: yarn playwright install --with-deps - if: steps.playwright-cache.outputs.cache-hit != 'true' - - run: yarn playwright install-deps - if: steps.playwright-cache.outputs.cache-hit != 'true' - - - name: Run Playwright tests - run: yarn playwright test - - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 5 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3770d5738..83f605fa1 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -16,7 +16,7 @@ jobs: - uses: actions/setup-node@v3 with: cache: yarn - node-version: 18 + node-version-file: .nvmrc - name: Install Dependencies run: yarn install diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml deleted file mode 100644 index 7c515450a..000000000 --- a/.github/workflows/size.yml +++ /dev/null @@ -1,16 +0,0 @@ -name: Compressed Size - -on: [pull_request] - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 1 - - uses: preactjs/compressed-size-action@v2 - with: - repo-token: '${{ secrets.GITHUB_TOKEN }}' - build-script: 'turbo run build --filter {./packages/*}...' diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml deleted file mode 100644 index 7d06aaaa0..000000000 --- a/.github/workflows/test.yml +++ /dev/null @@ -1,37 +0,0 @@ -name: Unit Test - -on: - pull_request: - push: - branches: [main] - -jobs: - test: - runs-on: ubuntu-latest - - strategy: - fail-fast: false - matrix: - node: ['18.x'] - - name: Test on node ${{ matrix.node }} - - steps: - - uses: actions/checkout@v3 - - - name: Use Node.js ${{ matrix.node }} - uses: actions/setup-node@v3 - with: - cache: yarn - node-version: ${{ matrix.node }} - - - name: Install deps, build, and test - run: | - node --version - npm --version - yarn --version - yarn install --frozen-lockfile - yarn test --coverage - env: - CI: true - NODE_OPTIONS: --max-old-space-size=4096 diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..3f430af82 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v18 From d7db9cddba9008714f2853013d5d4e82c8c94558 Mon Sep 17 00:00:00 2001 From: Craig Patik Date: Sun, 17 Sep 2023 21:49:20 +0200 Subject: [PATCH 20/34] Add missing dependency @types/hoist-non-react-statics, closes #3837 (#3860) This package is needed by Formik but it was not included in the dependency list. Fixes #3837 --- .changeset/soft-guests-study.md | 5 +++++ packages/formik/package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/soft-guests-study.md diff --git a/.changeset/soft-guests-study.md b/.changeset/soft-guests-study.md new file mode 100644 index 000000000..0f8cd8362 --- /dev/null +++ b/.changeset/soft-guests-study.md @@ -0,0 +1,5 @@ +--- +formik: patch +--- + +Add missing dependency `@types/hoist-non-react-statics`, closes #3837 diff --git a/packages/formik/package.json b/packages/formik/package.json index 37c47935d..9faf9bac3 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -46,6 +46,7 @@ "lint": "tsdx lint" }, "dependencies": { + "@types/hoist-non-react-statics": "^3.3.1", "deepmerge": "^2.1.1", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.21", @@ -56,7 +57,6 @@ }, "devDependencies": { "@testing-library/react": "^14.0.0", - "@types/hoist-non-react-statics": "^3.3.1", "@types/lodash": "^4.14.119", "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", From 724e0da11e25a5cd733cd5da804c8793deac1e70 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 17 Sep 2023 19:51:00 +0000 Subject: [PATCH 21/34] Version Packages --- .changeset/soft-guests-study.md | 5 ----- .changeset/wise-games-battle.md | 5 ----- packages/formik-native/CHANGELOG.md | 7 +++++++ packages/formik-native/package.json | 4 ++-- packages/formik/CHANGELOG.md | 15 +++++++++++---- packages/formik/package.json | 2 +- 6 files changed, 21 insertions(+), 17 deletions(-) delete mode 100644 .changeset/soft-guests-study.md delete mode 100644 .changeset/wise-games-battle.md diff --git a/.changeset/soft-guests-study.md b/.changeset/soft-guests-study.md deleted file mode 100644 index 0f8cd8362..000000000 --- a/.changeset/soft-guests-study.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -formik: patch ---- - -Add missing dependency `@types/hoist-non-react-statics`, closes #3837 diff --git a/.changeset/wise-games-battle.md b/.changeset/wise-games-battle.md deleted file mode 100644 index 14e2abe54..000000000 --- a/.changeset/wise-games-battle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"formik": patch ---- - -Mark `formik` as side-effect free in `package.json` diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md index 93820b963..e3461da1f 100644 --- a/packages/formik-native/CHANGELOG.md +++ b/packages/formik-native/CHANGELOG.md @@ -1,5 +1,12 @@ # formik-native +## 2.1.28 + +### Patch Changes + +- Updated dependencies [[`d7db9cd`](https://github.com/jaredpalmer/formik/commit/d7db9cddba9008714f2853013d5d4e82c8c94558), [`fe4ed7e`](https://github.com/jaredpalmer/formik/commit/fe4ed7e048b14331a75e40cabf48e4787d9b2b71)]: + - formik@2.4.5 + ## 2.1.27 ### Patch Changes diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json index 0590c9a78..152b5ff8f 100644 --- a/packages/formik-native/package.json +++ b/packages/formik-native/package.json @@ -1,6 +1,6 @@ { "name": "formik-native", - "version": "2.1.27", + "version": "2.1.28", "license": "Apache-2.0", "author": "Jared Palmer ", "repository": "formium/formik", @@ -30,7 +30,7 @@ "react": ">=16.8.0" }, "dependencies": { - "formik": "2.4.4" + "formik": "2.4.5" }, "devDependencies": { "@react-native-community/eslint-config": "^0.0.5", diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md index 6c40ea435..a8cb976cd 100644 --- a/packages/formik/CHANGELOG.md +++ b/packages/formik/CHANGELOG.md @@ -1,15 +1,22 @@ # formik -## 2.4.4 +## 2.4.5 ### Patch Changes -- [`41720c2`](https://github.com/jaredpalmer/formik/commit/41720c2f69407e41c27b325923bce63436b07f45) [#3862](https://github.com/jaredpalmer/formik/pull/3862) Thanks @yazaldefilimonepinto! - Forward `className` for custom components used with `Field` +- [`d7db9cd`](https://github.com/jaredpalmer/formik/commit/d7db9cddba9008714f2853013d5d4e82c8c94558) [#3860](https://github.com/jaredpalmer/formik/pull/3860) Thanks [@patik](https://github.com/patik)! - Add missing dependency `@types/hoist-non-react-statics`, closes #3837 + +* [`fe4ed7e`](https://github.com/jaredpalmer/formik/commit/fe4ed7e048b14331a75e40cabf48e4787d9b2b71) [#3501](https://github.com/jaredpalmer/formik/pull/3501) Thanks [@markspolakovs](https://github.com/markspolakovs)! - Mark `formik` as side-effect free in `package.json` + +## 2.4.4 + +### Patch Changes -- [`da58b29`](https://github.com/jaredpalmer/formik/commit/da58b292c9c0b6029ae21ab4b5edff09dd877c1b) [#3858](https://github.com/jaredpalmer/formik/pull/3858) Thanks @alaanescobedo! - Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` +- [`41720c2`](https://github.com/jaredpalmer/formik/commit/41720c2f69407e41c27b325923bce63436b07f45) [#3862](https://github.com/jaredpalmer/formik/pull/3862) Thanks @yazaldefilimonepinto! - Forward `className` for custom components used with `Field` -- [`5c01ee7`](https://github.com/jaredpalmer/formik/commit/5c01ee77b312ff6c375d43f841fe9fbe5846ebd9) [#3872](https://github.com/jaredpalmer/formik/pull/3872) Thanks @rajpatelbot! - FIX: Fixed resetForm function dependency issue +- [`da58b29`](https://github.com/jaredpalmer/formik/commit/da58b292c9c0b6029ae21ab4b5edff09dd877c1b) [#3858](https://github.com/jaredpalmer/formik/pull/3858) Thanks @alaanescobedo! - Remove use of deprecated `StatelessComponent` type in favor of `FunctionComponent` +- [`5c01ee7`](https://github.com/jaredpalmer/formik/commit/5c01ee77b312ff6c375d43f841fe9fbe5846ebd9) [#3872](https://github.com/jaredpalmer/formik/pull/3872) Thanks @rajpatelbot! - FIX: Fixed resetForm function dependency issue ## 2.4.3 diff --git a/packages/formik/package.json b/packages/formik/package.json index 9faf9bac3..2db8b4ac9 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -1,7 +1,7 @@ { "name": "formik", "description": "Build forms in React, without the tears", - "version": "2.4.4", + "version": "2.4.5", "license": "Apache-2.0", "author": "Jared Palmer (https://jaredpalmer.com)", "contributors": [ From f22eb8e99918663603ff150590465fe58be910b6 Mon Sep 17 00:00:00 2001 From: Evan Jacobs <570070+quantizor@users.noreply.github.com> Date: Wed, 10 Apr 2024 10:54:40 -0400 Subject: [PATCH 22/34] chore: update Evan's handle (#3965) --- .all-contributorsrc | 4 ++-- .github/CODEOWNERS | 6 +++--- .vscode/settings.json | 2 +- packages/formik/CHANGELOG.md | 28 ++++++++++++++-------------- packages/formik/package.json | 2 +- 5 files changed, 21 insertions(+), 21 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 03c818670..a5dd02a27 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -123,10 +123,10 @@ ] }, { - "login": "probablyup", + "login": "quantizor", "name": "Evan Jacobs", "avatar_url": "https://avatars.githubusercontent.com/u/570070?v=4", - "profile": "https://probablyup.com", + "profile": "https://quantizor.dev", "contributions": [ "question", "code", diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index b948465e4..605db9d96 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,6 +1,6 @@ # Learn how to add code owners here: # https://help.github.com/en/articles/about-code-owners -* @jaredpalmer @probablyup -/docs/ @jaredpalmer @probablyup -/examples/ @jaredpalmer @probablyup \ No newline at end of file +* @jaredpalmer @quantizor +/docs/ @jaredpalmer @quantizor +/examples/ @jaredpalmer @quantizor \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index e56b4cfc8..11a40855a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,6 +2,6 @@ "typescript.tsdk": "node_modules/typescript/lib", "editor.formatOnSave": false, "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, } diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md index a8cb976cd..cead81a0e 100644 --- a/packages/formik/CHANGELOG.md +++ b/packages/formik/CHANGELOG.md @@ -28,7 +28,7 @@ ### Patch Changes -- [`96280d3`](https://github.com/jaredpalmer/formik/commit/96280d388eaa0f2e9fb84e7fd2aa45450de3a949) [#3817](https://github.com/jaredpalmer/formik/pull/3817) Thanks [@probablyup](https://github.com/probablyup)! - Updated internal types to support React 18. +- [`96280d3`](https://github.com/jaredpalmer/formik/commit/96280d388eaa0f2e9fb84e7fd2aa45450de3a949) [#3817](https://github.com/jaredpalmer/formik/pull/3817) Thanks [@quantizor](https://github.com/quantizor)! - Updated internal types to support React 18. ## 2.4.1 @@ -36,21 +36,21 @@ - [`2b194c2`](https://github.com/jaredpalmer/formik/commit/2b194c287dc281ec2a8ff691d75c6b798ab5f70c) [#3808](https://github.com/jaredpalmer/formik/pull/3808) Thanks [@NagaiKoki](https://github.com/NagaiKoki)! - fix type of setFieldValue function -* [`708bcb2`](https://github.com/jaredpalmer/formik/commit/708bcb24785f1f8fbb5dfd649de3df4fddf7a113) [#3813](https://github.com/jaredpalmer/formik/pull/3813) Thanks [@probablyup](https://github.com/probablyup)! - Revert `FieldArray` "shouldComponentUpdate" performance optimization. As it turns out, it's a common use case to have JSX controlled via non-Formik state/props inside of `FieldArray`, so it's not safe to cancel re-renders here. +* [`708bcb2`](https://github.com/jaredpalmer/formik/commit/708bcb24785f1f8fbb5dfd649de3df4fddf7a113) [#3813](https://github.com/jaredpalmer/formik/pull/3813) Thanks [@quantizor](https://github.com/quantizor)! - Revert `FieldArray` "shouldComponentUpdate" performance optimization. As it turns out, it's a common use case to have JSX controlled via non-Formik state/props inside of `FieldArray`, so it's not safe to cancel re-renders here. -- [`187e47d`](https://github.com/jaredpalmer/formik/commit/187e47de0c4289cb279e25d69f8172cfa14369d2) [#3815](https://github.com/jaredpalmer/formik/pull/3815) Thanks [@probablyup](https://github.com/probablyup)! - Revert Yup transform support for the time being, this may be re-introduced in a future release under an opt-in prop. +- [`187e47d`](https://github.com/jaredpalmer/formik/commit/187e47de0c4289cb279e25d69f8172cfa14369d2) [#3815](https://github.com/jaredpalmer/formik/pull/3815) Thanks [@quantizor](https://github.com/quantizor)! - Revert Yup transform support for the time being, this may be re-introduced in a future release under an opt-in prop. ## 2.4.0 ### Minor Changes -- [`2f53b70`](https://github.com/jaredpalmer/formik/commit/2f53b70ef9c086a268330fa263390a2edd0164dd) [#3796](https://github.com/jaredpalmer/formik/pull/3796) Thanks [@probablyup](https://github.com/probablyup)! - Add support for Yup ["transforms"](https://github.com/jquense/yup#parsing-transforms). +- [`2f53b70`](https://github.com/jaredpalmer/formik/commit/2f53b70ef9c086a268330fa263390a2edd0164dd) [#3796](https://github.com/jaredpalmer/formik/pull/3796) Thanks [@quantizor](https://github.com/quantizor)! - Add support for Yup ["transforms"](https://github.com/jquense/yup#parsing-transforms). ## 2.3.3 ### Patch Changes -- [`f075a0c`](https://github.com/jaredpalmer/formik/commit/f075a0cf8228c135ff71c58e139246ad24aae529) [#3798](https://github.com/jaredpalmer/formik/pull/3798) Thanks [@probablyup](https://github.com/probablyup)! - Fixed the use of generics for the `ArrayHelpers` type such that `any[]` is the default array type and for each individual method the array item type can be overridden if necessary. +- [`f075a0c`](https://github.com/jaredpalmer/formik/commit/f075a0cf8228c135ff71c58e139246ad24aae529) [#3798](https://github.com/jaredpalmer/formik/pull/3798) Thanks [@quantizor](https://github.com/quantizor)! - Fixed the use of generics for the `ArrayHelpers` type such that `any[]` is the default array type and for each individual method the array item type can be overridden if necessary. ## 2.3.2 @@ -58,21 +58,21 @@ - [`f086b5a`](https://github.com/jaredpalmer/formik/commit/f086b5a3bb6a155b4dc4ac3735c88805f9f5c4e4) [#3237](https://github.com/jaredpalmer/formik/pull/3237) Thanks [@pieplu](https://github.com/pieplu)! - Changed `getIn` to return undefined when it can't find a value AND a parent of that value is "falsy" ( "" / 0 / null / false ) -* [`6d8f018`](https://github.com/jaredpalmer/formik/commit/6d8f018d7f52b863405b2e310be4b4195c2ba39c) [#3792](https://github.com/jaredpalmer/formik/pull/3792) Thanks [@probablyup](https://github.com/probablyup)! - Update the type for `setFieldValue` to reflect the returned `Promise` and potential returned error(s). +* [`6d8f018`](https://github.com/jaredpalmer/formik/commit/6d8f018d7f52b863405b2e310be4b4195c2ba39c) [#3792](https://github.com/jaredpalmer/formik/pull/3792) Thanks [@quantizor](https://github.com/quantizor)! - Update the type for `setFieldValue` to reflect the returned `Promise` and potential returned error(s). ## 2.3.1 ### Patch Changes -- [`290d92b`](https://github.com/jaredpalmer/formik/commit/290d92b34056593f551ad55baf00dc6f8c700bbe) [#3793](https://github.com/jaredpalmer/formik/pull/3793) Thanks [@probablyup](https://github.com/probablyup)! - Fix potential infinite loop scenario when `initialValues` changes but `enableReinitialize` is not truthy. +- [`290d92b`](https://github.com/jaredpalmer/formik/commit/290d92b34056593f551ad55baf00dc6f8c700bbe) [#3793](https://github.com/jaredpalmer/formik/pull/3793) Thanks [@quantizor](https://github.com/quantizor)! - Fix potential infinite loop scenario when `initialValues` changes but `enableReinitialize` is not truthy. ## 2.3.0 ### Minor Changes -- [`73de78d`](https://github.com/jaredpalmer/formik/commit/73de78d169f0bc25bd84dff0beaed3cc7a2cbb11) [#3788](https://github.com/jaredpalmer/formik/pull/3788) Thanks [@probablyup](https://github.com/probablyup)! - Added typescript generics to `ArrayHelpers` interface and its methods so that users who use TypeScript can set the type for their arrays and have type safety on array utils. I have also gone ahead and made supplying a type for the generic optional for the sake of backwards compatibility so any existing TS code that does not give a type for the FieldArray will continue to work as they always have. +- [`73de78d`](https://github.com/jaredpalmer/formik/commit/73de78d169f0bc25bd84dff0beaed3cc7a2cbb11) [#3788](https://github.com/jaredpalmer/formik/pull/3788) Thanks [@quantizor](https://github.com/quantizor)! - Added typescript generics to `ArrayHelpers` interface and its methods so that users who use TypeScript can set the type for their arrays and have type safety on array utils. I have also gone ahead and made supplying a type for the generic optional for the sake of backwards compatibility so any existing TS code that does not give a type for the FieldArray will continue to work as they always have. -* [`39a7bf7`](https://github.com/jaredpalmer/formik/commit/39a7bf7ca31f2ef5b149a8ff02bab64667e19654) [#3786](https://github.com/jaredpalmer/formik/pull/3786) Thanks [@probablyup](https://github.com/probablyup)! - Yup by default only allows for cross-field validation within the +* [`39a7bf7`](https://github.com/jaredpalmer/formik/commit/39a7bf7ca31f2ef5b149a8ff02bab64667e19654) [#3786](https://github.com/jaredpalmer/formik/pull/3786) Thanks [@quantizor](https://github.com/quantizor)! - Yup by default only allows for cross-field validation within the same field object. This is not that useful in most scenarios because a sufficiently-complex form will have several `yup.object()` in the schema. @@ -115,17 +115,17 @@ ### Patch Changes -- [`22e236e`](https://github.com/jaredpalmer/formik/commit/22e236ed8035c7c5824232202c8ce52193338d5a) [#3784](https://github.com/jaredpalmer/formik/pull/3784) Thanks [@probablyup](https://github.com/probablyup)! - Improve performance of the `FieldArray` component by adding a `shouldComponentUpdate` check; this should help avoid unnecessary re-renders which may affect the performance of a form. +- [`22e236e`](https://github.com/jaredpalmer/formik/commit/22e236ed8035c7c5824232202c8ce52193338d5a) [#3784](https://github.com/jaredpalmer/formik/pull/3784) Thanks [@quantizor](https://github.com/quantizor)! - Improve performance of the `FieldArray` component by adding a `shouldComponentUpdate` check; this should help avoid unnecessary re-renders which may affect the performance of a form. -* [`bc9cb28`](https://github.com/jaredpalmer/formik/commit/bc9cb28df7ad07277a499e8301cfd1bb7b230b86) [#3785](https://github.com/jaredpalmer/formik/pull/3785) Thanks [@probablyup](https://github.com/probablyup)! - Fixed field error state for array fields that have an error and become empty through an API like `arrayHelpers.remove`. +* [`bc9cb28`](https://github.com/jaredpalmer/formik/commit/bc9cb28df7ad07277a499e8301cfd1bb7b230b86) [#3785](https://github.com/jaredpalmer/formik/pull/3785) Thanks [@quantizor](https://github.com/quantizor)! - Fixed field error state for array fields that have an error and become empty through an API like `arrayHelpers.remove`. The prior behavior resolved the field error to `[undefined]`, now it is simply `undefined`. -- [`9cbf150`](https://github.com/jaredpalmer/formik/commit/9cbf150e65d7c5498900f19b4fa1897ca8a2c87f) [#3787](https://github.com/jaredpalmer/formik/pull/3787) Thanks [@probablyup](https://github.com/probablyup)! - Fix infinite loop issue in `Field` when field helpers (`setTouched`, etc) are used as an argument in `React.useEffect`. +- [`9cbf150`](https://github.com/jaredpalmer/formik/commit/9cbf150e65d7c5498900f19b4fa1897ca8a2c87f) [#3787](https://github.com/jaredpalmer/formik/pull/3787) Thanks [@quantizor](https://github.com/quantizor)! - Fix infinite loop issue in `Field` when field helpers (`setTouched`, etc) are used as an argument in `React.useEffect`. -* [`9c75a9f`](https://github.com/jaredpalmer/formik/commit/9c75a9f639eb38ad55c351e5e1def8a7e5ebd1f3) [#3780](https://github.com/jaredpalmer/formik/pull/3780) Thanks [@probablyup](https://github.com/probablyup)! - Fixed an issue with array field errors being incorrectly split into an array of individual characters instead of an array of error strings. +* [`9c75a9f`](https://github.com/jaredpalmer/formik/commit/9c75a9f639eb38ad55c351e5e1def8a7e5ebd1f3) [#3780](https://github.com/jaredpalmer/formik/pull/3780) Thanks [@quantizor](https://github.com/quantizor)! - Fixed an issue with array field errors being incorrectly split into an array of individual characters instead of an array of error strings. -- [`35fa4cc`](https://github.com/jaredpalmer/formik/commit/35fa4cc38260d709a5570dd3c9ef82831758a5f5) [#3783](https://github.com/jaredpalmer/formik/pull/3783) Thanks [@probablyup](https://github.com/probablyup)! - Fix validation of deep.dot.path field references when using the `validateField` API. +- [`35fa4cc`](https://github.com/jaredpalmer/formik/commit/35fa4cc38260d709a5570dd3c9ef82831758a5f5) [#3783](https://github.com/jaredpalmer/formik/pull/3783) Thanks [@quantizor](https://github.com/quantizor)! - Fix validation of deep.dot.path field references when using the `validateField` API. ## 2.2.9 diff --git a/packages/formik/package.json b/packages/formik/package.json index 2db8b4ac9..c8e830ab0 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -5,7 +5,7 @@ "license": "Apache-2.0", "author": "Jared Palmer (https://jaredpalmer.com)", "contributors": [ - "Evan Jacobs (https://probablyup.com)" + "Evan Jacobs (https://quantizor.dev)" ], "repository": "jaredpalmer/formik", "homepage": "https://formik.org", From ba15818e7d2c97bbed074b45cb80baac1b38aa01 Mon Sep 17 00:00:00 2001 From: Tex Andersen Date: Thu, 11 Apr 2024 01:01:22 +1000 Subject: [PATCH 23/34] Fix broken code example in FastField API docs + update CONTRIBUTING.md `master` references to `main` (#3958) Title pretty much summarises it. --- .github/CONTRIBUTING.md | 6 +++--- docs/api/fastfield.md | 11 ++++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index b58951398..1193bd4d0 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -69,8 +69,8 @@ git remote add upstream https://github.com/formik/formik.git 3. Synchronize your local `next` branch with the upstream one: ```sh -git checkout master -git pull upstream master +git checkout main +git pull upstream main ``` 4. Install the dependencies with [yarn](https://yarnpkg.com) (npm isn't supported): @@ -122,7 +122,7 @@ the results. If any of them fail, refer to [Checks and how to fix them](#checks- Make sure the following is true: -- The branch is targeted at `master` for ongoing development. We do our best to keep `master` in good shape, with all tests passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time. +- The branch is targeted at `main` for ongoing development. We do our best to keep `main` in good shape, with all tests passing. Code that lands in `main` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `main` at any time. - If a feature is being added: - If the result was already achievable with the library, explain why this feature needs to be added. - If this is a common use case, consider adding an example to the documentation. diff --git a/docs/api/fastfield.md b/docs/api/fastfield.md index cd9d7b1bf..32fa48ee3 100644 --- a/docs/api/fastfield.md +++ b/docs/api/fastfield.md @@ -57,7 +57,8 @@ const Basic = () => ( alert(JSON.stringify(values, null, 2)); }, 500); }} - render={formikProps => ( + > + {formikProps => ( {/** This only updates for changes made to values.firstName, touched.firstName, errors.firstName */} @@ -66,8 +67,8 @@ const Basic = () => ( {/** Updates for all changes because it's from the top-level formikProps which get all updates */} - {form.touched.firstName && form.errors.firstName && ( -
{form.errors.firstName}
+ {formikProps.touched.firstName && formikProps.errors.firstName && ( +
{formikProps.errors.firstName}
)} @@ -105,7 +106,7 @@ const Basic = () => ( and all changes by all s and s */} - {() => ( + {({ field, form, meta }) => (
{/** Works because this is inside @@ -125,7 +126,7 @@ const Basic = () => ( )} - /> +
); ``` From c6ceb654761c268fdc76b225f31453dd4dec1be6 Mon Sep 17 00:00:00 2001 From: Bailey Lissington <54869395+llamington@users.noreply.github.com> Date: Thu, 11 Apr 2024 03:02:21 +1200 Subject: [PATCH 24/34] Fix grammatical error in field.md (#3928) --- docs/api/field.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/field.md b/docs/api/field.md index 422493ec6..a2c1002c6 100644 --- a/docs/api/field.md +++ b/docs/api/field.md @@ -102,7 +102,7 @@ Either a React component or the name of an HTML element to render. That is, one - A valid HTML element name - A custom React component -Custom React components will be passed `onChange`, `onBlur`, `name`, and `value` plus any other props passed to directly to ``. +Custom React components will be passed `onChange`, `onBlur`, `name`, and `value` plus any other props passed directly to ``. Default is `'input'` (so an `` is rendered by default) From f57ca9bc5ee3842d50f74f39b3fb36a744b55ae8 Mon Sep 17 00:00:00 2001 From: DeveloperRaj <40798951+DeveloperRaj@users.noreply.github.com> Date: Thu, 11 Apr 2024 00:16:56 +0530 Subject: [PATCH 25/34] Fix #3948 - Changing state was also causing change of initial value (#3949) Resolves Issue #3948 This addresses the problem of the dirty field not updating when the value of a nested object changes. The root cause of this issue is that the `initialValues` coming from props were directly assigned to the `useRef`, which did not perform a deep copy. Without a deep copy, it was modifying the original `initialValues` props along with the current state. Consequently, when comparing them for equality, the result was true --- .changeset/empty-vans-bathe.md | 5 ++++ packages/formik/src/Formik.tsx | 9 +++--- packages/formik/test/Formik.test.tsx | 44 ++++++++++++++++++++++++++++ 3 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 .changeset/empty-vans-bathe.md diff --git a/.changeset/empty-vans-bathe.md b/.changeset/empty-vans-bathe.md new file mode 100644 index 000000000..adfff99c5 --- /dev/null +++ b/.changeset/empty-vans-bathe.md @@ -0,0 +1,5 @@ +--- +'formik': patch +--- + +Changing the state inside formik was changing reference of initialValues provided via props, deep cloning the initialvalues will fix it. diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx index cd17adcd4..80d868665 100755 --- a/packages/formik/src/Formik.tsx +++ b/packages/formik/src/Formik.tsx @@ -1,5 +1,6 @@ import deepmerge from 'deepmerge'; import isPlainObject from 'lodash/isPlainObject'; +import cloneDeep from 'lodash/cloneDeep'; import * as React from 'react'; import isEqual from 'react-fast-compare'; import invariant from 'tiny-warning'; @@ -173,10 +174,10 @@ export function useFormik({ const [, setIteration] = React.useState(0); const stateRef = React.useRef>({ - values: props.initialValues, - errors: props.initialErrors || emptyErrors, - touched: props.initialTouched || emptyTouched, - status: props.initialStatus, + values: cloneDeep(props.initialValues), + errors: cloneDeep(props.initialErrors) || emptyErrors, + touched: cloneDeep(props.initialTouched) || emptyTouched, + status: cloneDeep(props.initialStatus), isSubmitting: false, isValidating: false, submitCount: 0, diff --git a/packages/formik/test/Formik.test.tsx b/packages/formik/test/Formik.test.tsx index 2acf332dd..98b6ef3c9 100644 --- a/packages/formik/test/Formik.test.tsx +++ b/packages/formik/test/Formik.test.tsx @@ -61,6 +61,20 @@ const InitialValues = { age: 30, }; +const InitialValuesWithNestedObject = { + content: { + items: [ + { + cards: [ + { + desc: 'Initial Desc', + }, + ], + }, + ], + }, +}; + function renderFormik( props?: Partial> ) { @@ -1454,4 +1468,34 @@ describe('', () => { expect(innerRef.current).toEqual(getProps()); }); + + it('should not modify original initialValues object', () => { + render( + + {formikProps => ( + { + const copy = { ...formikProps.values.content }; + copy.items[0].cards[0].desc = e.target.value; + formikProps.setValues({ + ...formikProps.values, + content: copy, + }); + }} + /> + )} + + ); + const input = screen.getByTestId('desc-input'); + + fireEvent.change(input, { + target: { + value: 'New Value', + }, + }); + + expect(InitialValuesWithNestedObject.content.items[0].cards[0].desc).toEqual('Initial Desc'); + }); }); From c798145e2307b0273ea4d9c6bfd8250f28d95be9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 24 Apr 2024 18:21:21 -0400 Subject: [PATCH 26/34] Version Packages (#3966) Co-authored-by: github-actions[bot] --- .changeset/empty-vans-bathe.md | 5 ----- packages/formik-native/CHANGELOG.md | 7 +++++++ packages/formik-native/package.json | 4 ++-- packages/formik/CHANGELOG.md | 6 ++++++ packages/formik/package.json | 2 +- 5 files changed, 16 insertions(+), 8 deletions(-) delete mode 100644 .changeset/empty-vans-bathe.md diff --git a/.changeset/empty-vans-bathe.md b/.changeset/empty-vans-bathe.md deleted file mode 100644 index adfff99c5..000000000 --- a/.changeset/empty-vans-bathe.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'formik': patch ---- - -Changing the state inside formik was changing reference of initialValues provided via props, deep cloning the initialvalues will fix it. diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md index e3461da1f..e9afbbc85 100644 --- a/packages/formik-native/CHANGELOG.md +++ b/packages/formik-native/CHANGELOG.md @@ -1,5 +1,12 @@ # formik-native +## 2.1.29 + +### Patch Changes + +- Updated dependencies [[`f57ca9b`](https://github.com/jaredpalmer/formik/commit/f57ca9bc5ee3842d50f74f39b3fb36a744b55ae8)]: + - formik@2.4.6 + ## 2.1.28 ### Patch Changes diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json index 152b5ff8f..7653cce45 100644 --- a/packages/formik-native/package.json +++ b/packages/formik-native/package.json @@ -1,6 +1,6 @@ { "name": "formik-native", - "version": "2.1.28", + "version": "2.1.29", "license": "Apache-2.0", "author": "Jared Palmer ", "repository": "formium/formik", @@ -30,7 +30,7 @@ "react": ">=16.8.0" }, "dependencies": { - "formik": "2.4.5" + "formik": "2.4.6" }, "devDependencies": { "@react-native-community/eslint-config": "^0.0.5", diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md index cead81a0e..a3b24da4d 100644 --- a/packages/formik/CHANGELOG.md +++ b/packages/formik/CHANGELOG.md @@ -1,5 +1,11 @@ # formik +## 2.4.6 + +### Patch Changes + +- [`f57ca9b`](https://github.com/jaredpalmer/formik/commit/f57ca9bc5ee3842d50f74f39b3fb36a744b55ae8) [#3949](https://github.com/jaredpalmer/formik/pull/3949) Thanks [@DeveloperRaj](https://github.com/DeveloperRaj)! - Changing the state inside formik was changing reference of initialValues provided via props, deep cloning the initialvalues will fix it. + ## 2.4.5 ### Patch Changes diff --git a/packages/formik/package.json b/packages/formik/package.json index c8e830ab0..6d001676a 100644 --- a/packages/formik/package.json +++ b/packages/formik/package.json @@ -1,7 +1,7 @@ { "name": "formik", "description": "Build forms in React, without the tears", - "version": "2.4.5", + "version": "2.4.6", "license": "Apache-2.0", "author": "Jared Palmer (https://jaredpalmer.com)", "contributors": [ From 51e8cbbed53cb7fdfc7c214b0169d478d58576e5 Mon Sep 17 00:00:00 2001 From: Bartosz <2940958+burtek@users.noreply.github.com> Date: Thu, 29 Aug 2024 03:14:36 +0200 Subject: [PATCH 27/34] `FieldArray` - make array helpers more type-safe (#3982) Currently used `push(obj: X): void;` allows to push `string` to `number[]`. By changing the signature to `push(obj: X): void;` it won't be possible any more. --- packages/formik/src/FieldArray.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/formik/src/FieldArray.tsx b/packages/formik/src/FieldArray.tsx index 951a2a491..1e0a4073e 100644 --- a/packages/formik/src/FieldArray.tsx +++ b/packages/formik/src/FieldArray.tsx @@ -30,9 +30,9 @@ export type FieldArrayConfig = { } & SharedRenderProps; export interface ArrayHelpers { /** Imperatively add a value to the end of an array */ - push(obj: X): void; + push(obj: X): void; /** Curried fn to add a value to the end of an array */ - handlePush(obj: X): () => void; + handlePush(obj: X): () => void; /** Imperatively swap two values in an array */ swap: (indexA: number, indexB: number) => void; /** Curried fn to swap two values in an array */ @@ -42,25 +42,25 @@ export interface ArrayHelpers { /** Imperatively move an element in an array to another index */ handleMove: (from: number, to: number) => () => void; /** Imperatively insert an element at a given index into the array */ - insert(index: number, value: X): void; + insert(index: number, value: X): void; /** Curried fn to insert an element at a given index into the array */ - handleInsert(index: number, value: X): () => void; + handleInsert(index: number, value: X): () => void; /** Imperatively replace a value at an index of an array */ - replace(index: number, value: X): void; + replace(index: number, value: X): void; /** Curried fn to replace an element at a given index into the array */ - handleReplace(index: number, value: X): () => void; + handleReplace(index: number, value: X): () => void; /** Imperatively add an element to the beginning of an array and return its length */ - unshift(value: X): number; + unshift(value: X): number; /** Curried fn to add an element to the beginning of an array */ - handleUnshift(value: X): () => void; + handleUnshift(value: X): () => void; /** Curried fn to remove an element at an index of an array */ handleRemove: (index: number) => () => void; /** Curried fn to remove a value from the end of the array */ handlePop: () => () => void; /** Imperatively remove and element at an index of an array */ - remove(index: number): X | undefined; + remove(index: number): X | undefined; /** Imperatively remove and return value from the end of the array */ - pop(): X | undefined; + pop(): X | undefined; } /** From 0e617dbf60dce959e38acbcd0efdf3a178865eaf Mon Sep 17 00:00:00 2001 From: ankur-2dp Date: Thu, 29 Aug 2024 06:57:34 +0530 Subject: [PATCH 28/34] Typo_Fixed_in_useField.md (#3978) This Pull request fixes a typing error that was present in the /docs/api/useField.md . --- docs/api/useField.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/useField.md b/docs/api/useField.md index e5e3dd6aa..16bd82015 100644 --- a/docs/api/useField.md +++ b/docs/api/useField.md @@ -3,7 +3,7 @@ id: useField title: useField() --- -`useField` is a custom React hook that will automagically help you hook up inputs to Formik. You can and should use it to build your own custom input primitives. There are 2 ways to use it. +`useField` is a React hook used to thread Formik behaviors into arbitrary field components. It provides the greatest amount of flexibility for scenarios where `Field` is inappropriate. There are two ways to use it. ## Example From 99dbc24ce714387b27425df48abb7676bb8b582c Mon Sep 17 00:00:00 2001 From: Viacheslav Nikolaienko Date: Thu, 29 Aug 2024 04:43:01 +0300 Subject: [PATCH 29/34] Feat: 3960. Update setFieldValue with setter function (#3968) Feature for: #3960 --- .changeset/spotty-poets-bathe.md | 5 +++ docs/api/formik.md | 2 +- packages/formik/src/Formik.tsx | 8 +++-- packages/formik/test/Formik.test.tsx | 49 ++++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 .changeset/spotty-poets-bathe.md diff --git a/.changeset/spotty-poets-bathe.md b/.changeset/spotty-poets-bathe.md new file mode 100644 index 000000000..8228beca7 --- /dev/null +++ b/.changeset/spotty-poets-bathe.md @@ -0,0 +1,5 @@ +--- +'formik': patch +--- + +Value of setFieldValue can be a function that takes previous field value diff --git a/docs/api/formik.md b/docs/api/formik.md index 09c0c159b..9fa07f3a4 100644 --- a/docs/api/formik.md +++ b/docs/api/formik.md @@ -193,7 +193,7 @@ Trigger a form submission. The promise will be rejected if form is invalid. Number of times user tried to submit the form. Increases when [`handleSubmit`](#handlesubmit-e-reactformeventhtmlformelement--void) is called, resets after calling [`handleReset`](#handlereset---void). `submitCount` is readonly computed property and should not be mutated directly. -#### `setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise` +#### `setFieldValue: (field: string, value: React.SetStateAction, shouldValidate?: boolean) => Promise` Set the value of a field imperatively. `field` should match the key of `values` you wish to update. Useful for creating custom input change handlers. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a third argument as `false`. diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx index 80d868665..ea36e80d3 100755 --- a/packages/formik/src/Formik.tsx +++ b/packages/formik/src/Formik.tsx @@ -582,18 +582,20 @@ export function useFormik({ ); const setFieldValue = useEventCallback( - (field: string, value: any, shouldValidate?: boolean) => { + (field: string, value: React.SetStateAction, shouldValidate?: boolean) => { + const resolvedValue = isFunction(value) ? value(getIn(state.values, field)) : value; + dispatch({ type: 'SET_FIELD_VALUE', payload: { field, - value, + value: resolvedValue, }, }); const willValidate = shouldValidate === undefined ? validateOnChange : shouldValidate; return willValidate - ? validateFormWithHighPriority(setIn(state.values, field, value)) + ? validateFormWithHighPriority(setIn(state.values, field, resolvedValue)) : Promise.resolve(); } ); diff --git a/packages/formik/test/Formik.test.tsx b/packages/formik/test/Formik.test.tsx index 98b6ef3c9..864589643 100644 --- a/packages/formik/test/Formik.test.tsx +++ b/packages/formik/test/Formik.test.tsx @@ -740,6 +740,55 @@ describe('', () => { }); }); + it('setFieldValue sets value by key when takes a setter function', async () => { + const { getProps, rerender } = renderFormik(); + + act(() => { + getProps().setFieldValue('name', (prev: string) => { + return prev + ' chronicus'; + }); + }); + rerender(); + await waitFor(() => { + expect(getProps().values.name).toEqual('jared chronicus'); + }); + }); + + it( + 'setFieldValue should run validations with resolved value when takes a setter function and validateOnChange is true (default)', + async () => { + const validate = jest.fn(() =>({})); + const { getProps, rerender } = renderFormik({ validate }); + + act(() => { + getProps().setFieldValue('name', (prev: string) => prev + ' chronicus'); + }); + rerender(); + await waitFor(() => { + // the validate function is called with the second arg as undefined always in this case + expect(validate).toHaveBeenCalledWith(expect.objectContaining({ + name: 'jared chronicus', + }), undefined); + }); + } + ); + + it('setFieldValue should NOT run validations when takes a setter function and validateOnChange is false', async () => { + const validate = jest.fn(); + const { getProps, rerender } = renderFormik({ + validate, + validateOnChange: false, + }); + + act(() => { + getProps().setFieldValue('name', (prev: string) => prev + ' chronicus'); + }); + rerender(); + await waitFor(() => { + expect(validate).not.toHaveBeenCalled(); + }); + }); + it('setTouched sets touched', () => { const { getProps } = renderFormik(); From 54d3b6c440f66e469db4bdbf0742d611fd52fcd0 Mon Sep 17 00:00:00 2001 From: CharlesDM Date: Wed, 28 Aug 2024 20:47:15 -0500 Subject: [PATCH 30/34] Included Techjobs to user list (#3930) We're currently using Formik for some of our internal tools. Works well, and we are happy users. :) --- website/public/images/logos/techjobsbe.svg | 1 + website/src/users.ts | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 website/public/images/logos/techjobsbe.svg diff --git a/website/public/images/logos/techjobsbe.svg b/website/public/images/logos/techjobsbe.svg new file mode 100644 index 000000000..1b97c07ec --- /dev/null +++ b/website/public/images/logos/techjobsbe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/src/users.ts b/website/src/users.ts index 010cadab6..d5836be37 100644 --- a/website/src/users.ts +++ b/website/src/users.ts @@ -239,4 +239,9 @@ export const users = [ image: '/images/logos/authdog.svg', infoLink: 'https://www.authdog.com', }, + { + caption: 'Techjobs.be IT jobs', + image: '/images/logos/techjobsbe.svg', + infoLink: 'https://techjobs.be', + }, ]; From 728f8b94d4974d8c6c227f396c89b76d3c21c812 Mon Sep 17 00:00:00 2001 From: shuryhin-oleksandr <43747573+shuryhin-oleksandr@users.noreply.github.com> Date: Thu, 29 Aug 2024 04:50:43 +0300 Subject: [PATCH 31/34] Update useField.md (#3919) Unused `helpers` value. It should be either deleted, either example demonstrating how to use it should be provided. --- docs/api/useField.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/useField.md b/docs/api/useField.md index 16bd82015..e22245ffe 100644 --- a/docs/api/useField.md +++ b/docs/api/useField.md @@ -18,7 +18,7 @@ interface Values { } const MyTextField = ({ label, ...props }) => { - const [field, meta, helpers] = useField(props); + const [field, meta] = useField(props); return ( <>