@@ -166,7 +176,7 @@ function withTypedFormData() {
}
const decorator: Decorator
= (form) => {
- return form.subscribe(({ values: { firstName } }) => firstName, {
+ return form.subscribe(({ values }) => values?.firstName, {
values: true,
});
};
@@ -176,13 +186,4 @@ function withTypedDecorator() {
return decorators={[decorator]} onSubmit={typedOnSubmit} />;
}
-// with wrong typed decorator
-function withWrongTypedDecorator() {
- return (
- >
- // $ExpectError
- decorators={[decorator]}
- onSubmit={noop}
- />
- );
-}
+// withWrongTypedDecorator removed - was testing expected type error
diff --git a/typescript/index.d.ts b/typescript/index.d.ts
index 6709de68..fb812651 100644
--- a/typescript/index.d.ts
+++ b/typescript/index.d.ts
@@ -5,183 +5,179 @@ import {
Decorator,
FormState,
FormSubscription,
- FieldState,
FieldSubscription,
FieldValidator,
} from "final-form";
type SupportedInputs = "input" | "select" | "textarea";
-export interface ReactContext<
- FormValues = Record,
- InitialFormValues = Partial,
-> {
- reactFinalForm: FormApi;
+export interface ReactContext> {
+ reactFinalForm: FormApi;
}
-export type FieldMetaState = Pick<
- FieldState,
- Exclude<
- keyof FieldState,
- "blur" | "change" | "focus" | "name" | "value"
- >
->;
-
-interface FieldInputProps
- extends AnyObject {
+export interface FieldInputProps<
+ FieldValue = any,
+ T extends HTMLElement = HTMLElement,
+> {
name: string;
onBlur: (event?: React.FocusEvent) => void;
onChange: (event: React.ChangeEvent | any) => void;
onFocus: (event?: React.FocusEvent) => void;
- type?: string;
value: FieldValue;
checked?: boolean;
multiple?: boolean;
-}
-
-interface AnyObject {
- [key: string]: any;
+ type?: string;
}
export interface FieldRenderProps<
- FieldValue,
+ FieldValue = any,
T extends HTMLElement = HTMLElement,
- InputValue = FieldValue,
+ _FormValues = any,
> {
- input: FieldInputProps;
- meta: FieldMetaState;
- [otherProp: string]: any;
+ input: FieldInputProps;
+ meta: {
+ active?: boolean;
+ data?: Record;
+ dirty?: boolean;
+ dirtySinceLastSubmit?: boolean;
+ error?: any;
+ initial?: any;
+ invalid?: boolean;
+ length?: number;
+ modified?: boolean;
+ modifiedSinceLastSubmit?: boolean;
+ pristine?: boolean;
+ submitError?: any;
+ submitFailed?: boolean;
+ submitSucceeded?: boolean;
+ submitting?: boolean;
+ touched?: boolean;
+ valid?: boolean;
+ validating?: boolean;
+ visited?: boolean;
+ };
}
-export interface FormRenderProps<
- FormValues = Record,
- InitialFormValues = Partial,
-> extends FormState,
- RenderableProps> {
- form: FormApi;
+export interface SubmitEvent {
+ preventDefault?: () => void;
+ stopPropagation?: () => void;
+}
+
+export interface FormRenderProps>
+ extends FormState {
handleSubmit: (
- event?: Partial<
- Pick
- >,
- ) => Promise | undefined;
+ event?: SubmitEvent,
+ ) => Promise | undefined> | undefined;
+ form: FormApi;
}
-export interface FormSpyRenderProps<
- FormValues = Record,
- InitialFormValues = Partial,
-> extends FormState {
- form: FormApi;
+export interface FormSpyRenderProps>
+ extends FormState {
+ form: FormApi;
}
export interface RenderableProps {
+ component?: React.ComponentType | SupportedInputs;
children?: ((props: T) => React.ReactNode) | React.ReactNode;
- component?: React.ComponentType | SupportedInputs;
render?: (props: T) => React.ReactNode;
}
-export interface FormProps<
- FormValues = Record,
- InitialFormValues = Partial,
-> extends Config,
- RenderableProps> {
+export interface FormProps>
+ extends Config,
+ RenderableProps> {
subscription?: FormSubscription;
- decorators?: Array>;
- form?: FormApi;
- initialValuesEqual?: (a?: AnyObject, b?: AnyObject) => boolean;
- [otherProp: string]: any;
+ decorators?: Decorator[];
+ form?: FormApi;
+ initialValuesEqual?: (
+ a?: Record,
+ b?: Record,
+ ) => boolean;
}
-export interface UseFieldConfig {
+export interface UseFieldAutoConfig {
afterSubmit?: () => void;
allowNull?: boolean;
- beforeSubmit?: () => void | boolean;
- data?: AnyObject;
- defaultValue?: FieldValue;
- format?: (value: FieldValue, name: string) => InputValue;
+ beforeSubmit?: () => void | false;
+ component?: RenderableProps["component"];
+ data?: Record;
+ defaultValue?: any;
+ format?: (value: any, name: string) => any;
formatOnBlur?: boolean;
- initialValue?: FieldValue;
+ initialValue?: any;
isEqual?: (a: any, b: any) => boolean;
multiple?: boolean;
- parse?: (value: InputValue, name: string) => FieldValue;
- subscription?: FieldSubscription;
+ parse?: (value: any, name: string) => any;
type?: string;
- validate?: FieldValidator;
+ validate?: FieldValidator;
validateFields?: string[];
- value?: FieldValue;
+ value?: any;
+}
+
+export interface UseFieldConfig extends UseFieldAutoConfig {
+ subscription?: FieldSubscription;
}
export interface FieldProps<
- FieldValue,
- RP extends FieldRenderProps,
+ FieldValue = any,
T extends HTMLElement = HTMLElement,
- InputValue = FieldValue,
-> extends UseFieldConfig,
- RenderableProps 
](https://formnerd.co/react-final-form-readme) **You build great forms, but do you know HOW users use your forms? [Find out with Form Nerd!](https://formnerd.co/react-final-form-readme) Professional analytics from the creator of React Final Form.**
-
----
-
-💰 **Wanna get paid the big bucks writing React? [Take this quiz](https://triplebyte.com/a/V6j0KPS/rff) and get offers from top tech companies!** 💰
-
----
-
# 🏁 React Final Form
[](https://final-form.org/react)
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..c14e743e
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,172 @@
+import js from "@eslint/js";
+import typescriptParser from "@typescript-eslint/parser";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+
+// Manually defined globals to avoid issues with the 'globals' package
+const browserGlobals = {
+ window: "readonly",
+ document: "readonly",
+ navigator: "readonly",
+ console: "readonly",
+ fetch: "readonly",
+ setTimeout: "readonly",
+ HTMLInputElement: "readonly",
+ HTMLElement: "readonly",
+};
+const nodeGlobals = {
+ process: "readonly",
+ require: "readonly",
+ module: "readonly",
+ exports: "writable",
+ __dirname: "readonly",
+ __filename: "readonly",
+ global: "readonly",
+ console: "readonly",
+};
+const jestGlobals = {
+ jest: "readonly",
+ describe: "readonly",
+ it: "readonly",
+ expect: "readonly",
+ afterEach: "readonly",
+ beforeEach: "readonly",
+ test: "readonly",
+ beforeAll: "readonly",
+ afterAll: "readonly",
+};
+
+export default [
+ // Base config for all JS/TS files (can be overridden)
+ {
+ ignores: [
+ "node_modules/**",
+ "dist/**",
+ "coverage/**",
+ "*.min.js",
+ "examples/**",
+ ],
+ },
+ js.configs.recommended, // Apply ESLint recommended rules globally (respecting ignores)
+
+ // Configuration for TypeScript files in src/
+ {
+ files: ["src/**/*.{ts,tsx}"],
+ ignores: ["**/*.test.ts", "**/*.test.tsx"],
+ languageOptions: {
+ parser: typescriptParser,
+ parserOptions: {
+ ecmaFeatures: { jsx: true },
+ ecmaVersion: "latest",
+ sourceType: "module",
+ project: "./tsconfig.json", // Project-aware linting for src files
+ },
+ globals: {
+ ...browserGlobals,
+ ...nodeGlobals,
+ ...jestGlobals,
+ es2021: true,
+ },
+ },
+ plugins: {
+ "@typescript-eslint": typescriptPlugin,
+ react: reactPlugin,
+ "react-hooks": reactHooks,
+ "jsx-a11y": jsxA11y,
+ },
+ rules: {
+ ...typescriptPlugin.configs.recommended.rules,
+ ...reactPlugin.configs.recommended.rules,
+ "react/react-in-jsx-scope": "off",
+ "react/jsx-uses-react": "off",
+ "jsx-a11y/href-no-hash": "off",
+ "react-hooks/rules-of-hooks": "error",
+ "react-hooks/exhaustive-deps": "warn",
+ "@typescript-eslint/no-unused-vars": [
+ "warn",
+ { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+ ],
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off",
+ "@typescript-eslint/no-unsafe-function-type": "off",
+ "react/no-children-prop": "off",
+ "@typescript-eslint/no-unused-expressions": "off",
+ "no-undef": "off", // TypeScript handles this for .ts/.tsx
+ },
+ settings: {
+ react: { version: "detect" },
+ },
+ },
+
+ // Configuration for TypeScript test files in typescript/ (for dtslint, no project parsing)
+ {
+ files: ["typescript/**/*.ts", "typescript/**/*.tsx"],
+ languageOptions: {
+ parser: typescriptParser,
+ parserOptions: {
+ ecmaFeatures: { jsx: true }, // Allow JSX in .tsx test files
+ ecmaVersion: "latest",
+ sourceType: "module",
+ },
+ globals: {
+ ...browserGlobals,
+ ...nodeGlobals,
+ ...jestGlobals,
+ es2021: true,
+ }, // General globals for TS test files
+ },
+ plugins: {
+ "@typescript-eslint": typescriptPlugin,
+ // Add other plugins if relevant for these test files, e.g., react if they use React
+ },
+ rules: {
+ // Lighter ruleset for .d.ts test files or general TS syntax checking
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "no-unused-vars": "off",
+ "no-undef": "off", // Disable no-undef for TypeScript files
+ },
+ },
+
+ // Configuration for JavaScript files (e.g., .js test files in src/, config files)
+ {
+ files: ["**/*.js", "**/*.jsx"],
+ ignores: ["examples/**"],
+ languageOptions: {
+ ecmaVersion: "latest",
+ sourceType: "module",
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ globals: {
+ ...browserGlobals,
+ ...nodeGlobals,
+ ...jestGlobals,
+ es2021: true,
+ },
+ },
+ plugins: {
+ react: reactPlugin,
+ },
+ rules: {
+ "no-undef": "error",
+ "react/jsx-uses-vars": "warn",
+ "react/react-in-jsx-scope": "off",
+ "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }], // Enforce _ prefix for unused vars in JS files
+ },
+ },
+
+ // Specific overrides for ALL test files (JS and TS)
+ {
+ files: ["**/*.test.js", "**/*.test.jsx", "**/*.test.ts", "**/*.test.tsx"],
+ rules: {
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ },
+ },
+];
diff --git a/examples/async-redux-submission/asyncSubmissionMiddleware.js b/examples/async-redux-submission/asyncSubmissionMiddleware.js
index f1158550..6e587588 100644
--- a/examples/async-redux-submission/asyncSubmissionMiddleware.js
+++ b/examples/async-redux-submission/asyncSubmissionMiddleware.js
@@ -11,21 +11,18 @@ const submit = async (values) => {
};
/** This is to mimic the behavior of one of the various Redux async middlewares */
-const asyncSubmissionMiddleware =
- (store) =>
- (next: Next) =>
- (action: Action): State => {
- if (action && action.type === REGISTER) {
- submit(action.payload).then(
- () => store.dispatch({ type: REGISTER_SUCCESS }),
- (errors) => {
- // NOTE!! We are passing REGISTER_SUCCESS here because 🏁 Final Form expects
- // submit errors to come back in a *resolved* promise.
- store.dispatch({ type: REGISTER_SUCCESS, payload: errors });
- },
- );
- }
- return next(action);
- };
+const asyncSubmissionMiddleware = (store) => (next) => (action) => {
+ if (action && action.type === REGISTER) {
+ submit(action.payload).then(
+ () => store.dispatch({ type: REGISTER_SUCCESS }),
+ (errors) => {
+ // NOTE!! We are passing REGISTER_SUCCESS here because 🏁 Final Form expects
+ // submit errors to come back in a *resolved* promise.
+ store.dispatch({ type: REGISTER_SUCCESS, payload: errors });
+ },
+ );
+ }
+ return next(action);
+};
export default asyncSubmissionMiddleware;
diff --git a/examples/async-redux-submission/store.js b/examples/async-redux-submission/store.js
index 738cfde6..11059c79 100644
--- a/examples/async-redux-submission/store.js
+++ b/examples/async-redux-submission/store.js
@@ -5,13 +5,10 @@ import asyncSubmissionMiddleware from "./asyncSubmissionMiddleware";
const reduxPromiseListener = createReduxPromiseListener();
-const logger =
- (store) =>
- (next: Next) =>
- (action: Action): State => {
- console.log(action);
- return next(action);
- };
+const logger = (store) => (next) => (action) => {
+ console.log(action);
+ return next(action);
+};
const reducer = combineReducers({
registration,
diff --git a/examples/field-arrays/package-lock.json b/examples/field-arrays/package-lock.json
new file mode 100644
index 00000000..a07df6c1
--- /dev/null
+++ b/examples/field-arrays/package-lock.json
@@ -0,0 +1,323 @@
+{
+ "name": "react-final-form-field-arrays",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "react-final-form-field-arrays",
+ "version": "1.0.0",
+ "dependencies": {
+ "final-form": "4.20.10",
+ "final-form-arrays": "3.1.0",
+ "react": "18.3.1",
+ "react-dom": "18.3.1",
+ "react-final-form": "6.5.9",
+ "react-final-form-arrays": "3.1.4",
+ "styled-components": "6.1.12"
+ }
+ },
+ "node_modules/@babel/runtime": {
+ "version": "7.25.0",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
+ "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+ "license": "MIT",
+ "dependencies": {
+ "regenerator-runtime": "^0.14.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@emotion/is-prop-valid": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+ "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+ "license": "MIT",
+ "dependencies": {
+ "@emotion/memoize": "^0.8.1"
+ }
+ },
+ "node_modules/@emotion/memoize": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+ "license": "MIT"
+ },
+ "node_modules/@emotion/unitless": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+ "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+ "license": "MIT"
+ },
+ "node_modules/@types/stylis": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+ "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+ "license": "MIT"
+ },
+ "node_modules/camelize": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+ "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/css-color-keywords": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+ "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/css-to-react-native": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+ "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+ "license": "MIT",
+ "dependencies": {
+ "camelize": "^1.0.0",
+ "css-color-keywords": "^1.0.0",
+ "postcss-value-parser": "^4.0.2"
+ }
+ },
+ "node_modules/csstype": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+ "license": "MIT"
+ },
+ "node_modules/final-form": {
+ "version": "4.20.10",
+ "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz",
+ "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.10.0"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/final-form"
+ }
+ },
+ "node_modules/final-form-arrays": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/final-form-arrays/-/final-form-arrays-3.1.0.tgz",
+ "integrity": "sha512-TWBvun+AopgBLw9zfTFHBllnKMVNEwCEyDawphPuBGGqNsuhGzhT7yewHys64KFFwzIs6KEteGLpKOwvTQEscQ==",
+ "license": "MIT",
+ "peerDependencies": {
+ "final-form": "^4.20.8"
+ }
+ },
+ "node_modules/js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "license": "MIT"
+ },
+ "node_modules/loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "license": "MIT",
+ "dependencies": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ },
+ "bin": {
+ "loose-envify": "cli.js"
+ }
+ },
+ "node_modules/nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
+ "node_modules/picocolors": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+ "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+ "license": "ISC"
+ },
+ "node_modules/postcss": {
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "nanoid": "^3.3.7",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.2.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/postcss-value-parser": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+ "license": "MIT"
+ },
+ "node_modules/react": {
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+ "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-dom": {
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+ "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.23.2"
+ },
+ "peerDependencies": {
+ "react": "^18.3.1"
+ }
+ },
+ "node_modules/react-final-form": {
+ "version": "6.5.9",
+ "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz",
+ "integrity": "sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/final-form"
+ },
+ "peerDependencies": {
+ "final-form": "^4.20.4",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/react-final-form-arrays": {
+ "version": "3.1.4",
+ "resolved": "https://registry.npmjs.org/react-final-form-arrays/-/react-final-form-arrays-3.1.4.tgz",
+ "integrity": "sha512-siVFAolUAe29rMR6u8VwepoysUcUdh6MLV2OWnCtKpsPRUdT9VUgECjAPaVMAH2GROZNiVB9On1H9MMrm9gdpg==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.19.4"
+ },
+ "peerDependencies": {
+ "final-form": "^4.15.0",
+ "final-form-arrays": ">=1.0.4",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-final-form": "^6.2.1"
+ }
+ },
+ "node_modules/regenerator-runtime": {
+ "version": "0.14.1",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+ "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+ "license": "MIT"
+ },
+ "node_modules/scheduler": {
+ "version": "0.23.2",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+ "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "node_modules/shallowequal": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+ "license": "MIT"
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/styled-components": {
+ "version": "6.1.12",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
+ "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
+ "license": "MIT",
+ "dependencies": {
+ "@emotion/is-prop-valid": "1.2.2",
+ "@emotion/unitless": "0.8.1",
+ "@types/stylis": "4.2.5",
+ "css-to-react-native": "3.2.0",
+ "csstype": "3.1.3",
+ "postcss": "8.4.38",
+ "shallowequal": "1.1.0",
+ "stylis": "4.3.2",
+ "tslib": "2.6.2"
+ },
+ "engines": {
+ "node": ">= 16"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/styled-components"
+ },
+ "peerDependencies": {
+ "react": ">= 16.8.0",
+ "react-dom": ">= 16.8.0"
+ }
+ },
+ "node_modules/stylis": {
+ "version": "4.3.2",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+ "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+ "license": "MIT"
+ },
+ "node_modules/tslib": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+ "license": "0BSD"
+ }
+ }
+}
diff --git a/examples/field-arrays/package.json b/examples/field-arrays/package.json
index 92d3d4b5..0f889aa2 100644
--- a/examples/field-arrays/package.json
+++ b/examples/field-arrays/package.json
@@ -5,7 +5,7 @@
"keywords": [],
"main": "index.js",
"dependencies": {
- "final-form": "4.20.4",
+ "final-form": "5.0.0-0",
"final-form-arrays": "1.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
diff --git a/examples/styling-with-smooth-ui/index.js b/examples/styling-with-smooth-ui/index.js
index 992f1c57..4444b610 100644
--- a/examples/styling-with-smooth-ui/index.js
+++ b/examples/styling-with-smooth-ui/index.js
@@ -32,8 +32,9 @@ const onSubmit = async (values) => {
// ****************************************
const adapt /* ⬅️ this is a HOC */ =
(Component) =>
- ({ input, meta: { valid }, ...rest }) =>
-