Merge branch 'main' into id-prop-on-error-message

.all-contributorsrc

@@ -121,6 +121,22 @@
         "bug",
         "code"
       ]
+    },
+    {
+      "login": "probablyup",
+      "name": "Evan Jacobs",
+      "avatar_url": "https://avatars.githubusercontent.com/u/570070?v=4",
+      "profile": "https://probablyup.com",
+      "contributions": [
+        "question",
+        "code",
+        "design",
+        "doc",
+        "example",
+        "ideas",
+        "review",
+        "test"
+      ]
     }
   ],
   "repoType": "github"

.codesandbox/ci.json

@@ -1,6 +1,6 @@
 {
-  "buildCommand": "build",
-  "node": "16",
+  "buildCommand": "build:codesandbox",
+  "node": "18",
   "packages": ["packages/formik", "packages/formik-native"],
-  "sandboxes": ["ooh2y"]
+  "sandboxes": ["n4sgkx"]
 }

.github/workflows/benchmark.yml

@@ -0,0 +1,60 @@
+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 }}

.github/workflows/playwright.yml

@@ -3,10 +3,9 @@ on:
   push:
     branches: [main]
   pull_request:
-    branches: [main]
 jobs:
   test:
-    timeout-minutes: 5
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

.github/workflows/test.yml

@@ -10,6 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     strategy:
+      fail-fast: false
       matrix:
         node: ['18.x']
 

.gitignore

@@ -7,6 +7,7 @@ next.d.ts
 legacy.d.ts
 .idea
 *.orig
+output.txt
 
 node_modules
 package-lock.json

.prettierrc

@@ -1,6 +1,7 @@
 {
+  "tabWidth": 2,
   "trailingComma": "es5",
   "semi": true,
   "singleQuote": true,
   "arrowParens": "avoid"
-}
+}

docs/api/field.md

@@ -20,9 +20,9 @@ There are a few different ways to render things with `<Field>`.
 
 `children` can either be an array of elements (e.g. `<option>` in the case of `<Field as="select">`) or a callback function (a.k.a render prop). The render props are an object containing:
 
-- `field`: An object containing `onChange`, `onBlur`, `name`, and `value` of the field (see [`FieldInputProps`](./useField#fieldinputprops))
+- `field`: An object containing `onChange`, `onBlur`, `name`, and `value` of the field (see [`FieldInputProps`](./useField#fieldinputpropsvalue))
 - `form`: The Formik bag
-- `meta`: An object containing metadata (i.e. `value`, `touched`, `error`, and `initialValue`) about the field (see [`FieldMetaProps`](./useField#fieldmetaprops))
+- `meta`: An object containing metadata (i.e. `value`, `touched`, `error`, and `initialValue`) about the field (see [`FieldMetaProps`](./useField#fieldmetapropsvalue))
 
 `component` can either be a React component or the name of an HTML element to render. All additional props will be passed through.
 

docs/api/fieldarray.md

@@ -67,7 +67,7 @@ export const FriendList = () => (
 
 ### `name: string`
 
-The name or path to the relevant key in [`values`](./formik.md#values-field-string-any).
+The name or path to the relevant key in [`values`](./formik#values--field-string-any-).
 
 ### `validateOnChange?: boolean`
 

docs/api/formik.md

@@ -93,11 +93,11 @@ to `<button onClick={handleReset}>...</button>`
 
 #### `handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void`
 
-Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `isSubmitting: boolean`
 
-Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `isValid: boolean`
 
@@ -107,7 +107,7 @@ Returns `true` if there are no `errors` (i.e. the `errors` object is empty) and
 
 #### `isValidating: boolean`
 
-Returns `true` if Formik is running validation during submission, or by calling [`validateForm`] directly `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Returns `true` if Formik is running validation during submission, or by calling [`validateForm`] directly `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `resetForm: (nextState?: Partial<FormikState<Values>>) => void`
 
@@ -188,8 +188,8 @@ Trigger a form submission. The promise will be rejected if form is invalid.
 
 #### `submitCount: number`
 
-Number of times user tried to submit the form. Increases when [`handleSubmit`](#handlesubmit-e-reactformevent-htmlformelement-void) is called, resets after calling
-[`handleReset`](#handlereset-void). `submitCount` is readonly computed property and should not be mutated directly.
+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<void | FormikErrors>`
 
@@ -206,7 +206,7 @@ use it to pass API responses back into your component in `handleSubmit`.
 
 #### `setSubmitting: (isSubmitting: boolean) => void`
 
-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](../docs/guides/form-submission.md).
+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`
 
@@ -223,7 +223,7 @@ otherwise be expressed/stored with other methods. This is useful for capturing
 and passing through API responses to your inner component.
 
 `status` should only be modified by calling
-[`setStatus`](#setstatus-status-any-void).
+[`setStatus`](#setstatus-status-any--void).
 
 #### `touched: { [field: string]: boolean }`
 

docs/api/useField.md

@@ -128,7 +128,7 @@ function MyOtherComponent(props) {
 This object is a subset of the props that you would pass to `<Field>`. It contains:
 
 - `name: string` - The name of the field
-- `validate?: (value: any) => undefined | string | Promise<any>` - See [the documentation for `<Field>`](../field#validate)
+- `validate?: (value: any) => undefined | string | Promise<any>` - See [the documentation for `<Field>`](./field#validate)
 - `type?: string` - The type of the HTML input (`text`, `number` and etc.)
 - `multiple?: boolean` - Whether or not the multiple values can be selected.
 - `value?: string`- Works only for inputs of type `checkbox` and `radio`. When a form is submitted, checkboxes and radios are submitted with the provided `value`. Read more about it on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value).

package.json

@@ -1,14 +1,26 @@
 {
   "name": "formik-project",
   "private": true,
+  "type": "module",
+  "resolutions": {
+    "shelljs": "0.8.5",
+    "typescript": "^4.0.0"
+  },
   "devDependencies": {
     "@changesets/changelog-github": "^0.2.7",
     "@changesets/cli": "^2.10.3",
+    "@hookform/resolvers": "^3.1.1",
     "@playwright/test": "^1.34.3",
-    "@types/jest": "^26.0.14",
+    "@types/benchmark": "^2.1.2",
+    "@types/jest": "^25.0.0",
+    "benchmark": "^2.1.4",
+    "esm": "^3.2.25",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",
+    "react-hook-form": "^7.45.0",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.5.3",
     "turbo": "^1.9.9"
   },
   "workspaces": [
@@ -17,9 +29,11 @@
   ],
   "scripts": {
     "dev": "turbo run start",
-    "test": "turbo run test --filter {./packages/*}... --",
+    "test": "turbo run test --filter='./packages/*' --",
     "build": "turbo run build",
-    "prepublish": "turbo run build --filter {./packages/*}...",
+    "build:benchmark": "yarn build --filter=formik",
+    "build:codesandbox": "yarn build --filter='./packages/*'",
+    "prepublish": "turbo run build --filter='./packages/*'",
     "format": "prettier --write 'examples/**/*' 'packages/*/src/**/*' 'website/src/**/*.{ts,tsx,js,jsx,md,mdx}' 'app/pages/**/*'  'packages/*/test/**/*' 'README.md'",
     "changeset": "changeset",
     "release": "changeset publish",
@@ -28,7 +42,8 @@
     "e2e": "playwright test",
     "precommit": "lint-staged",
     "e2e:ui": "playwright test --ui",
-    "start:app": "turbo run build --filter formik... && yarn --cwd packages/formik link && yarn --cwd ./app link formik && yarn --cwd ./app && yarn --cwd ./app run dev"
+    "start:app": "turbo run build --filter formik... && yarn --cwd packages/formik link && yarn --cwd ./app link formik && yarn --cwd ./app && yarn --cwd ./app run dev",
+    "benchmark": "ts-node scripts/benchmark.tsx | tee output.txt"
   },
   "lint-staged": {
     "**/*.{ts,tsx,md,mdx,js,jsx}": [

packages/formik-native/CHANGELOG.md

@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.25
+
+### Patch Changes
+
+- Updated dependencies [[`96280d3`](https://github.com/jaredpalmer/formik/commit/96280d388eaa0f2e9fb84e7fd2aa45450de3a949)]:
+  - formik@2.4.2
+
 ## 2.1.24
 
 ### Patch Changes

packages/formik-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.24",
+  "version": "2.1.25",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -30,11 +30,11 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "2.4.1"
+    "formik": "2.4.2"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
-    "@types/react": "^16.9.55",
+    "@types/react": "^18.2.7",
     "@types/react-native": "^0.63.32",
     "react": "^18.2.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",

packages/formik/CHANGELOG.md

@@ -1,5 +1,11 @@
 # formik
 
+## 2.4.2
+
+### 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.
+
 ## 2.4.1
 
 ### Patch Changes

packages/formik/package.json

@@ -1,10 +1,13 @@
 {
   "name": "formik",
   "description": "Build forms in React, without the tears",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net> (https://jaredpalmer.com)",
-  "repository": "formium/formik",
+  "contributors": [
+    "Evan Jacobs <probablyup@gmail.com> (https://probablyup.com)"
+  ],
+  "repository": "jaredpalmer/formik",
   "homepage": "https://formik.org",
   "keywords": [
     "formik",
@@ -30,7 +33,9 @@
   "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"
   },
@@ -48,22 +53,21 @@
     "lodash-es": "^4.17.21",
     "react-fast-compare": "^2.0.1",
     "tiny-warning": "^1.0.2",
-    "tslib": "^1.10.0"
+    "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/react": "^14.0.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.14.119",
-    "@types/react": "^16.9.55",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
     "@types/warning": "^3.0.0",
-    "@types/yup": "^0.24.9",
     "just-debounce-it": "^1.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.0.3",
-    "yup": "^0.28.1"
+    "yup": "^0.32.0"
   },
   "jest": {
     "globals": {

packages/formik/src/Field.tsx

@@ -52,6 +52,11 @@ export interface FieldConfig<V = any> {
    */
   validate?: FieldValidator;
 
+  /**
+   * Used for 'select' and related input types.
+   */
+  multiple?: boolean;
+
   /**
    * Field name
    */