{"version":3,"file":"formik.cjs.development.js","sources":["../src/utils.ts","../src/FormikContext.tsx","../src/Formik.tsx","../src/Field.tsx","../src/Form.tsx","../src/withFormik.tsx","../src/connect.tsx","../src/FieldArray.tsx","../src/ErrorMessage.tsx","../src/FastField.tsx"],"sourcesContent":["import clone from 'lodash/clone';\nimport toPath from 'lodash/toPath';\nimport * as React from 'react';\n\n// Assertions\n\n/** @private is the value an empty array? */\nexport const isEmptyArray = (value?: any) =>\n Array.isArray(value) && value.length === 0;\n\n/** @private is the given object a Function? */\nexport const isFunction = (obj: any): obj is Function =>\n typeof obj === 'function';\n\n/** @private is the given object an Object? */\nexport const isObject = (obj: any): obj is Object =>\n obj !== null && typeof obj === 'object';\n\n/** @private is the given object an integer? */\nexport const isInteger = (obj: any): boolean =>\n String(Math.floor(Number(obj))) === obj;\n\n/** @private is the given object a string? */\nexport const isString = (obj: any): obj is string =>\n Object.prototype.toString.call(obj) === '[object String]';\n\n/** @private is the given object a NaN? */\n// eslint-disable-next-line no-self-compare\nexport const isNaN = (obj: any): boolean => obj !== obj;\n\n/** @private Does a React component have exactly 0 children? */\nexport const isEmptyChildren = (children: any): boolean =>\n React.Children.count(children) === 0;\n\n/** @private is the given object/value a promise? */\nexport const isPromise = (value: any): value is PromiseLike =>\n isObject(value) && isFunction(value.then);\n\n/** @private is the given object/value a type of synthetic event? */\nexport const isInputEvent = (value: any): value is React.SyntheticEvent =>\n value && isObject(value) && isObject(value.target);\n\n/**\n * Same as document.activeElement but wraps in a try-catch block. In IE it is\n * not safe to call document.activeElement if there is nothing focused.\n *\n * The activeElement will be null only if the document or document body is not\n * yet defined.\n *\n * @param {?Document} doc Defaults to current document.\n * @return {Element | null}\n * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js\n */\nexport function getActiveElement(doc?: Document): Element | null {\n doc = doc || (typeof document !== 'undefined' ? document : undefined);\n if (typeof doc === 'undefined') {\n return null;\n }\n try {\n return doc.activeElement || doc.body;\n } catch (e) {\n return doc.body;\n }\n}\n\n/**\n * Deeply get a value from an object via its path.\n */\nexport function getIn(\n obj: any,\n key: string | string[],\n def?: any,\n p: number = 0\n) {\n const path = toPath(key);\n while (obj && p < path.length) {\n obj = obj[path[p++]];\n }\n return obj === undefined ? def : obj;\n}\n\n/**\n * Deeply set a value from in object via it's path. If the value at `path`\n * has changed, return a shallow copy of obj with `value` set at `path`.\n * If `value` has not changed, return the original `obj`.\n *\n * Existing objects / arrays along `path` are also shallow copied. Sibling\n * objects along path retain the same internal js reference. Since new\n * objects / arrays are only created along `path`, we can test if anything\n * changed in a nested structure by comparing the object's reference in\n * the old and new object, similar to how russian doll cache invalidation\n * works.\n *\n * In earlier versions of this function, which used cloneDeep, there were\n * issues whereby settings a nested value would mutate the parent\n * instead of creating a new object. `clone` avoids that bug making a\n * shallow copy of the objects along the update path\n * so no object is mutated in place.\n *\n * Before changing this function, please read through the following\n * discussions.\n *\n * @see https://github.com/developit/linkstate\n * @see https://github.com/jaredpalmer/formik/pull/123\n */\nexport function setIn(obj: any, path: string, value: any): any {\n let res: any = clone(obj); // this keeps inheritance when obj is a class\n let resVal: any = res;\n let i = 0;\n let pathArray = toPath(path);\n\n for (; i < pathArray.length - 1; i++) {\n const currentPath: string = pathArray[i];\n let currentObj: any = getIn(obj, pathArray.slice(0, i + 1));\n\n if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {\n resVal = resVal[currentPath] = clone(currentObj);\n } else {\n const nextPath: string = pathArray[i + 1];\n resVal = resVal[currentPath] =\n isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};\n }\n }\n\n // Return original object if new value is the same as current\n if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {\n return obj;\n }\n\n if (value === undefined) {\n delete resVal[pathArray[i]];\n } else {\n resVal[pathArray[i]] = value;\n }\n\n // If the path array has a single element, the loop did not run.\n // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.\n if (i === 0 && value === undefined) {\n delete res[pathArray[i]];\n }\n\n return res;\n}\n\n/**\n * Recursively a set the same value for all keys and arrays nested object, cloning\n * @param object\n * @param value\n * @param visited\n * @param response\n */\nexport function setNestedObjectValues(\n object: any,\n value: any,\n visited: any = new WeakMap(),\n response: any = {}\n): T {\n for (let k of Object.keys(object)) {\n const val = object[k];\n if (isObject(val)) {\n if (!visited.get(val)) {\n visited.set(val, true);\n // In order to keep array values consistent for both dot path and\n // bracket syntax, we need to check if this is an array so that\n // this will output { friends: [true] } and not { friends: { \"0\": true } }\n response[k] = Array.isArray(val) ? [] : {};\n setNestedObjectValues(val, value, visited, response[k]);\n }\n } else {\n response[k] = value;\n }\n }\n\n return response;\n}\n","import * as React from 'react';\nimport { FormikContextType } from './types';\nimport invariant from 'tiny-warning';\n\nexport const FormikContext = React.createContext>(\n undefined as any\n);\nFormikContext.displayName = 'FormikContext';\n\nexport const FormikProvider = FormikContext.Provider;\nexport const FormikConsumer = FormikContext.Consumer;\n\nexport function useFormikContext() {\n const formik = React.useContext>(FormikContext);\n\n invariant(\n !!formik,\n `Formik context is undefined, please verify you are calling useFormikContext() as child of a component.`\n );\n\n return formik;\n}\n","import * as React from 'react';\nimport isEqual from 'react-fast-compare';\nimport deepmerge from 'deepmerge';\nimport isPlainObject from 'lodash/isPlainObject';\nimport {\n FormikConfig,\n FormikErrors,\n FormikState,\n FormikTouched,\n FormikValues,\n FormikProps,\n FieldMetaProps,\n FieldHelperProps,\n FieldInputProps,\n FormikHelpers,\n FormikHandlers,\n} from './types';\nimport {\n isFunction,\n isString,\n setIn,\n isEmptyChildren,\n isPromise,\n setNestedObjectValues,\n getActiveElement,\n getIn,\n isObject,\n} from './utils';\nimport { FormikProvider } from './FormikContext';\nimport invariant from 'tiny-warning';\n\ntype FormikMessage =\n | { type: 'SUBMIT_ATTEMPT' }\n | { type: 'SUBMIT_FAILURE' }\n | { type: 'SUBMIT_SUCCESS' }\n | { type: 'SET_ISVALIDATING'; payload: boolean }\n | { type: 'SET_ISSUBMITTING'; payload: boolean }\n | { type: 'SET_VALUES'; payload: Values }\n | { type: 'SET_FIELD_VALUE'; payload: { field: string; value?: any } }\n | { type: 'SET_FIELD_TOUCHED'; payload: { field: string; value?: boolean } }\n | { type: 'SET_FIELD_ERROR'; payload: { field: string; value?: string } }\n | { type: 'SET_TOUCHED'; payload: FormikTouched }\n | { type: 'SET_ERRORS'; payload: FormikErrors }\n | { type: 'SET_STATUS'; payload: any }\n | {\n type: 'SET_FORMIK_STATE';\n payload: (s: FormikState) => FormikState;\n }\n | {\n type: 'RESET_FORM';\n payload: FormikState;\n };\n\n// State reducer\nfunction formikReducer(\n state: FormikState,\n msg: FormikMessage\n) {\n switch (msg.type) {\n case 'SET_VALUES':\n return { ...state, values: msg.payload };\n case 'SET_TOUCHED':\n return { ...state, touched: msg.payload };\n case 'SET_ERRORS':\n if (isEqual(state.errors, msg.payload)) {\n return state;\n }\n\n return { ...state, errors: msg.payload };\n case 'SET_STATUS':\n return { ...state, status: msg.payload };\n case 'SET_ISSUBMITTING':\n return { ...state, isSubmitting: msg.payload };\n case 'SET_ISVALIDATING':\n return { ...state, isValidating: msg.payload };\n case 'SET_FIELD_VALUE':\n return {\n ...state,\n values: setIn(state.values, msg.payload.field, msg.payload.value),\n };\n case 'SET_FIELD_TOUCHED':\n return {\n ...state,\n touched: setIn(state.touched, msg.payload.field, msg.payload.value),\n };\n case 'SET_FIELD_ERROR':\n return {\n ...state,\n errors: setIn(state.errors, msg.payload.field, msg.payload.value),\n };\n case 'RESET_FORM':\n return { ...state, ...msg.payload };\n case 'SET_FORMIK_STATE':\n return msg.payload(state);\n case 'SUBMIT_ATTEMPT':\n return {\n ...state,\n touched: setNestedObjectValues>(\n state.values,\n true\n ),\n isSubmitting: true,\n submitCount: state.submitCount + 1,\n };\n case 'SUBMIT_FAILURE':\n return {\n ...state,\n isSubmitting: false,\n };\n case 'SUBMIT_SUCCESS':\n return {\n ...state,\n isSubmitting: false,\n };\n default:\n return state;\n }\n}\n\n// Initial empty states // objects\nconst emptyErrors: FormikErrors = {};\nconst emptyTouched: FormikTouched = {};\n\n// This is an object that contains a map of all registered fields\n// and their validate functions\ninterface FieldRegistry {\n [field: string]: {\n validate: (value: any) => string | Promise | undefined;\n };\n}\n\nexport function useFormik({\n validateOnChange = true,\n validateOnBlur = true,\n validateOnMount = false,\n isInitialValid,\n enableReinitialize = false,\n onSubmit,\n ...rest\n}: FormikConfig) {\n const props = {\n validateOnChange,\n validateOnBlur,\n validateOnMount,\n onSubmit,\n ...rest,\n };\n const initialValues = React.useRef(props.initialValues);\n const initialErrors = React.useRef(props.initialErrors || emptyErrors);\n const initialTouched = React.useRef(props.initialTouched || emptyTouched);\n const initialStatus = React.useRef(props.initialStatus);\n const isMounted = React.useRef(false);\n const fieldRegistry = React.useRef({});\n if (__DEV__) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n invariant(\n typeof isInitialValid === 'undefined',\n 'isInitialValid has been deprecated and will be removed in future versions of Formik. Please use initialErrors or validateOnMount instead.'\n );\n // eslint-disable-next-line\n }, []);\n }\n\n React.useEffect(() => {\n isMounted.current = true;\n\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n const [state, dispatch] = React.useReducer<\n React.Reducer, FormikMessage>\n >(formikReducer, {\n values: props.initialValues,\n errors: props.initialErrors || emptyErrors,\n touched: props.initialTouched || emptyTouched,\n status: props.initialStatus,\n isSubmitting: false,\n isValidating: false,\n submitCount: 0,\n });\n\n const runValidateHandler = React.useCallback(\n (values: Values, field?: string): Promise> => {\n return new Promise((resolve, reject) => {\n const maybePromisedErrors = (props.validate as any)(values, field);\n if (maybePromisedErrors == null) {\n // use loose null check here on purpose\n resolve(emptyErrors);\n } else if (isPromise(maybePromisedErrors)) {\n (maybePromisedErrors as Promise).then(\n errors => {\n resolve(errors || emptyErrors);\n },\n actualException => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n `Warning: An unhandled error was caught during validation in `,\n actualException\n );\n }\n\n reject(actualException);\n }\n );\n } else {\n resolve(maybePromisedErrors);\n }\n });\n },\n [props.validate]\n );\n\n /**\n * Run validation against a Yup schema and optionally run a function if successful\n */\n const runValidationSchema = React.useCallback(\n (values: Values, field?: string): Promise> => {\n const validationSchema = props.validationSchema;\n const schema = isFunction(validationSchema)\n ? validationSchema(field)\n : validationSchema;\n const promise =\n field && schema.validateAt\n ? schema.validateAt(field, values)\n : validateYupSchema(values, schema);\n return new Promise((resolve, reject) => {\n promise.then(\n () => {\n resolve(emptyErrors);\n },\n (err: any) => {\n // Yup will throw a validation error if validation fails. We catch those and\n // resolve them into Formik errors. We can sniff if something is a Yup error\n // by checking error.name.\n // @see https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string\n if (err.name === 'ValidationError') {\n resolve(yupToFormErrors(err));\n } else {\n // We throw any other errors\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n `Warning: An unhandled error was caught during validation in `,\n err\n );\n }\n\n reject(err);\n }\n }\n );\n });\n },\n [props.validationSchema]\n );\n\n const runSingleFieldLevelValidation = React.useCallback(\n (field: string, value: void | string): Promise => {\n return new Promise(resolve =>\n resolve(fieldRegistry.current[field].validate(value) as string)\n );\n },\n []\n );\n\n const runFieldLevelValidations = React.useCallback(\n (values: Values): Promise> => {\n const fieldKeysWithValidation: string[] = Object.keys(\n fieldRegistry.current\n ).filter(f => isFunction(fieldRegistry.current[f].validate));\n\n // Construct an array with all of the field validation functions\n const fieldValidations: Promise[] =\n fieldKeysWithValidation.length > 0\n ? fieldKeysWithValidation.map(f =>\n runSingleFieldLevelValidation(f, getIn(values, f))\n )\n : [Promise.resolve('DO_NOT_DELETE_YOU_WILL_BE_FIRED')]; // use special case ;)\n\n return Promise.all(fieldValidations).then((fieldErrorsList: string[]) =>\n fieldErrorsList.reduce((prev, curr, index) => {\n if (curr === 'DO_NOT_DELETE_YOU_WILL_BE_FIRED') {\n return prev;\n }\n if (curr) {\n prev = setIn(prev, fieldKeysWithValidation[index], curr);\n }\n return prev;\n }, {})\n );\n },\n [runSingleFieldLevelValidation]\n );\n\n // Run all validations and return the result\n const runAllValidations = React.useCallback(\n (values: Values) => {\n return Promise.all([\n runFieldLevelValidations(values),\n props.validationSchema ? runValidationSchema(values) : {},\n props.validate ? runValidateHandler(values) : {},\n ]).then(([fieldErrors, schemaErrors, validateErrors]) => {\n const combinedErrors = deepmerge.all>(\n [fieldErrors, schemaErrors, validateErrors],\n { arrayMerge }\n );\n return combinedErrors;\n });\n },\n [\n props.validate,\n props.validationSchema,\n runFieldLevelValidations,\n runValidateHandler,\n runValidationSchema,\n ]\n );\n\n // Run all validations methods and update state accordingly\n const validateFormWithHighPriority = useEventCallback(\n (values: Values = state.values) => {\n dispatch({ type: 'SET_ISVALIDATING', payload: true });\n return runAllValidations(values).then(combinedErrors => {\n if (!!isMounted.current) {\n dispatch({ type: 'SET_ISVALIDATING', payload: false });\n dispatch({ type: 'SET_ERRORS', payload: combinedErrors });\n }\n return combinedErrors;\n });\n }\n );\n\n React.useEffect(() => {\n if (\n validateOnMount &&\n isMounted.current === true &&\n isEqual(initialValues.current, props.initialValues)\n ) {\n validateFormWithHighPriority(initialValues.current);\n }\n }, [validateOnMount, validateFormWithHighPriority]);\n\n const resetForm = React.useCallback(\n (nextState?: Partial>) => {\n const values =\n nextState && nextState.values\n ? nextState.values\n : initialValues.current;\n const errors =\n nextState && nextState.errors\n ? nextState.errors\n : initialErrors.current\n ? initialErrors.current\n : props.initialErrors || {};\n const touched =\n nextState && nextState.touched\n ? nextState.touched\n : initialTouched.current\n ? initialTouched.current\n : props.initialTouched || {};\n const status =\n nextState && nextState.status\n ? nextState.status\n : initialStatus.current\n ? initialStatus.current\n : props.initialStatus;\n initialValues.current = values;\n initialErrors.current = errors;\n initialTouched.current = touched;\n initialStatus.current = status;\n\n const dispatchFn = () => {\n dispatch({\n type: 'RESET_FORM',\n payload: {\n isSubmitting: !!nextState && !!nextState.isSubmitting,\n errors,\n touched,\n status,\n values,\n isValidating: !!nextState && !!nextState.isValidating,\n submitCount:\n !!nextState &&\n !!nextState.submitCount &&\n typeof nextState.submitCount === 'number'\n ? nextState.submitCount\n : 0,\n },\n });\n };\n\n if (props.onReset) {\n const maybePromisedOnReset = (props.onReset as any)(\n state.values,\n imperativeMethods\n );\n\n if (isPromise(maybePromisedOnReset)) {\n (maybePromisedOnReset as Promise).then(dispatchFn);\n } else {\n dispatchFn();\n }\n } else {\n dispatchFn();\n }\n },\n [props.initialErrors, props.initialStatus, props.initialTouched]\n );\n\n React.useEffect(() => {\n if (\n isMounted.current === true &&\n !isEqual(initialValues.current, props.initialValues)\n ) {\n if (enableReinitialize) {\n initialValues.current = props.initialValues;\n resetForm();\n }\n\n if (validateOnMount) {\n validateFormWithHighPriority(initialValues.current);\n }\n }\n }, [\n enableReinitialize,\n props.initialValues,\n resetForm,\n validateOnMount,\n validateFormWithHighPriority,\n ]);\n\n React.useEffect(() => {\n if (\n enableReinitialize &&\n isMounted.current === true &&\n !isEqual(initialErrors.current, props.initialErrors)\n ) {\n initialErrors.current = props.initialErrors || emptyErrors;\n dispatch({\n type: 'SET_ERRORS',\n payload: props.initialErrors || emptyErrors,\n });\n }\n }, [enableReinitialize, props.initialErrors]);\n\n React.useEffect(() => {\n if (\n enableReinitialize &&\n isMounted.current === true &&\n !isEqual(initialTouched.current, props.initialTouched)\n ) {\n initialTouched.current = props.initialTouched || emptyTouched;\n dispatch({\n type: 'SET_TOUCHED',\n payload: props.initialTouched || emptyTouched,\n });\n }\n }, [enableReinitialize, props.initialTouched]);\n\n React.useEffect(() => {\n if (\n enableReinitialize &&\n isMounted.current === true &&\n !isEqual(initialStatus.current, props.initialStatus)\n ) {\n initialStatus.current = props.initialStatus;\n dispatch({\n type: 'SET_STATUS',\n payload: props.initialStatus,\n });\n }\n }, [enableReinitialize, props.initialStatus, props.initialTouched]);\n\n const validateField = useEventCallback((name: string) => {\n // This will efficiently validate a single field by avoiding state\n // changes if the validation function is synchronous. It's different from\n // what is called when using validateForm.\n\n if (\n fieldRegistry.current[name] &&\n isFunction(fieldRegistry.current[name].validate)\n ) {\n const value = getIn(state.values, name);\n const maybePromise = fieldRegistry.current[name].validate(value);\n if (isPromise(maybePromise)) {\n // Only flip isValidating if the function is async.\n dispatch({ type: 'SET_ISVALIDATING', payload: true });\n return maybePromise\n .then((x: any) => x)\n .then((error: string) => {\n dispatch({\n type: 'SET_FIELD_ERROR',\n payload: { field: name, value: error },\n });\n dispatch({ type: 'SET_ISVALIDATING', payload: false });\n });\n } else {\n dispatch({\n type: 'SET_FIELD_ERROR',\n payload: {\n field: name,\n value: maybePromise as string | undefined,\n },\n });\n return Promise.resolve(maybePromise as string | undefined);\n }\n } else if (props.validationSchema) {\n dispatch({ type: 'SET_ISVALIDATING', payload: true });\n return runValidationSchema(state.values, name)\n .then((x: any) => x)\n .then((error: any) => {\n dispatch({\n type: 'SET_FIELD_ERROR',\n payload: { field: name, value: error[name] },\n });\n dispatch({ type: 'SET_ISVALIDATING', payload: false });\n });\n }\n\n return Promise.resolve();\n });\n\n const registerField = React.useCallback((name: string, { validate }: any) => {\n fieldRegistry.current[name] = {\n validate,\n };\n }, []);\n\n const unregisterField = React.useCallback((name: string) => {\n delete fieldRegistry.current[name];\n }, []);\n\n const setTouched = useEventCallback(\n (touched: FormikTouched, shouldValidate?: boolean) => {\n dispatch({ type: 'SET_TOUCHED', payload: touched });\n const willValidate =\n shouldValidate === undefined ? validateOnBlur : shouldValidate;\n return willValidate\n ? validateFormWithHighPriority(state.values)\n : Promise.resolve();\n }\n );\n\n const setErrors = React.useCallback((errors: FormikErrors) => {\n dispatch({ type: 'SET_ERRORS', payload: errors });\n }, []);\n\n const setValues = useEventCallback(\n (values: React.SetStateAction, shouldValidate?: boolean) => {\n const resolvedValues = isFunction(values) ? values(state.values) : values;\n\n dispatch({ type: 'SET_VALUES', payload: resolvedValues });\n const willValidate =\n shouldValidate === undefined ? validateOnChange : shouldValidate;\n return willValidate\n ? validateFormWithHighPriority(resolvedValues)\n : Promise.resolve();\n }\n );\n\n const setFieldError = React.useCallback(\n (field: string, value: string | undefined) => {\n dispatch({\n type: 'SET_FIELD_ERROR',\n payload: { field, value },\n });\n },\n []\n );\n\n const setFieldValue = useEventCallback(\n (field: string, value: any, shouldValidate?: boolean) => {\n dispatch({\n type: 'SET_FIELD_VALUE',\n payload: {\n field,\n value,\n },\n });\n const willValidate =\n shouldValidate === undefined ? validateOnChange : shouldValidate;\n return willValidate\n ? validateFormWithHighPriority(setIn(state.values, field, value))\n : Promise.resolve();\n }\n );\n\n const executeChange = React.useCallback(\n (eventOrTextValue: string | React.ChangeEvent, maybePath?: string) => {\n // By default, assume that the first argument is a string. This allows us to use\n // handleChange with React Native and React Native Web's onChangeText prop which\n // provides just the value of the input.\n let field = maybePath;\n let val = eventOrTextValue;\n let parsed;\n // If the first argument is not a string though, it has to be a synthetic React Event (or a fake one),\n // so we handle like we would a normal HTML change event.\n if (!isString(eventOrTextValue)) {\n // If we can, persist the event\n // @see https://reactjs.org/docs/events.html#event-pooling\n if ((eventOrTextValue as any).persist) {\n (eventOrTextValue as React.ChangeEvent).persist();\n }\n const target = eventOrTextValue.target\n ? (eventOrTextValue as React.ChangeEvent).target\n : (eventOrTextValue as React.ChangeEvent).currentTarget;\n\n const {\n type,\n name,\n id,\n value,\n checked,\n outerHTML,\n options,\n multiple,\n } = target;\n\n field = maybePath ? maybePath : name ? name : id;\n if (!field && __DEV__) {\n warnAboutMissingIdentifier({\n htmlContent: outerHTML,\n documentationAnchorLink: 'handlechange-e-reactchangeeventany--void',\n handlerName: 'handleChange',\n });\n }\n val = /number|range/.test(type)\n ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)\n : /checkbox/.test(type) // checkboxes\n ? getValueForCheckbox(getIn(state.values, field!), checked, value)\n : options && multiple //