@rjsf/core 5.24.4 → 5.24.7

package/lib/components/Form.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, createRef } from 'react';
 import { createSchemaUtils, deepEquals, getChangedFields, getTemplate, getUiOptions, isObject, mergeObjects, NAME_KEY, RJSF_ADDITIONAL_PROPERTIES_FLAG, shouldRender, SUBMIT_BTN_OPTIONS_KEY, toErrorList, UI_GLOBAL_OPTIONS_KEY, UI_OPTIONS_KEY, validationDataMerge, createErrorHandler, unwrapErrorHandler, } from '@rjsf/utils';
-import _forEach from 'lodash/forEach';
-import _get from 'lodash/get';
-import _isEmpty from 'lodash/isEmpty';
-import _isNil from 'lodash/isNil';
-import _pick from 'lodash/pick';
-import _toPath from 'lodash/toPath';
-import getDefaultRegistry from '../getDefaultRegistry';
+import _forEach from 'lodash-es/forEach.js';
+import _get from 'lodash-es/get.js';
+import _isEmpty from 'lodash-es/isEmpty.js';
+import _isNil from 'lodash-es/isNil.js';
+import _pick from 'lodash-es/pick.js';
+import _toPath from 'lodash-es/toPath.js';
+import getDefaultRegistry from '../getDefaultRegistry.js';
 /** The `Form` component renders the outer form and all the fields defined in the `schema` */
 export default class Form extends Component {
+    /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
+     * provide any possible type here
+     */
+    formElement;
     /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
      * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
      * state construction.
@@ -18,280 +22,6 @@ export default class Form extends Component {
      */
     constructor(props) {
         super(props);
-        /** Returns the `formData` with only the elements specified in the `fields` list
-         *
-         * @param formData - The data for the `Form`
-         * @param fields - The fields to keep while filtering
-         */
-        this.getUsedFormData = (formData, fields) => {
-            // For the case of a single input form
-            if (fields.length === 0 && typeof formData !== 'object') {
-                return formData;
-            }
-            // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
-            const data = _pick(formData, fields);
-            if (Array.isArray(formData)) {
-                return Object.keys(data).map((key) => data[key]);
-            }
-            return data;
-        };
-        /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
-         *
-         * @param pathSchema - The `PathSchema` object for the form
-         * @param [formData] - The form data to use while checking for empty objects/arrays
-         */
-        this.getFieldNames = (pathSchema, formData) => {
-            const getAllPaths = (_obj, acc = [], paths = [[]]) => {
-                Object.keys(_obj).forEach((key) => {
-                    if (typeof _obj[key] === 'object') {
-                        const newPaths = paths.map((path) => [...path, key]);
-                        // If an object is marked with additionalProperties, all its keys are valid
-                        if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
-                            acc.push(_obj[key][NAME_KEY]);
-                        }
-                        else {
-                            getAllPaths(_obj[key], acc, newPaths);
-                        }
-                    }
-                    else if (key === NAME_KEY && _obj[key] !== '') {
-                        paths.forEach((path) => {
-                            const formValue = _get(formData, path);
-                            // adds path to fieldNames if it points to a value
-                            // or an empty object/array
-                            if (typeof formValue !== 'object' ||
-                                _isEmpty(formValue) ||
-                                (Array.isArray(formValue) && formValue.every((val) => typeof val !== 'object'))) {
-                                acc.push(path);
-                            }
-                        });
-                    }
-                });
-                return acc;
-            };
-            return getAllPaths(pathSchema);
-        };
-        /** Returns the `formData` after filtering to remove any extra data not in a form field
-         *
-         * @param formData - The data for the `Form`
-         * @returns The `formData` after omitting extra data
-         */
-        this.omitExtraData = (formData) => {
-            const { schema, schemaUtils } = this.state;
-            const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-            const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
-            const fieldNames = this.getFieldNames(pathSchema, formData);
-            const newFormData = this.getUsedFormData(formData, fieldNames);
-            return newFormData;
-        };
-        /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
-         * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
-         * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
-         * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
-         * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
-         * callback will be called if specified with the updated state.
-         *
-         * @param formData - The new form data from a change to a field
-         * @param newErrorSchema - The new `ErrorSchema` based on the field change
-         * @param id - The id of the field that caused the change
-         */
-        this.onChange = (formData, newErrorSchema, id) => {
-            const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-            const { schemaUtils, schema } = this.state;
-            let retrievedSchema = this.state.retrievedSchema;
-            if (isObject(formData) || Array.isArray(formData)) {
-                const newState = this.getStateFromProps(this.props, formData);
-                formData = newState.formData;
-                retrievedSchema = newState.retrievedSchema;
-            }
-            const mustValidate = !noValidate && liveValidate;
-            let state = { formData, schema };
-            let newFormData = formData;
-            if (omitExtraData === true && liveOmit === true) {
-                newFormData = this.omitExtraData(formData);
-                state = {
-                    formData: newFormData,
-                };
-            }
-            if (mustValidate) {
-                const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
-                let errors = schemaValidation.errors;
-                let errorSchema = schemaValidation.errorSchema;
-                const schemaValidationErrors = errors;
-                const schemaValidationErrorSchema = errorSchema;
-                if (extraErrors) {
-                    const merged = validationDataMerge(schemaValidation, extraErrors);
-                    errorSchema = merged.errorSchema;
-                    errors = merged.errors;
-                }
-                // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
-                if (newErrorSchema) {
-                    const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
-                    errorSchema = mergeObjects(errorSchema, filteredErrors, 'preventDuplicates');
-                }
-                state = {
-                    formData: newFormData,
-                    errors,
-                    errorSchema,
-                    schemaValidationErrors,
-                    schemaValidationErrorSchema,
-                };
-            }
-            else if (!noValidate && newErrorSchema) {
-                const errorSchema = extraErrors
-                    ? mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates')
-                    : newErrorSchema;
-                state = {
-                    formData: newFormData,
-                    errorSchema: errorSchema,
-                    errors: toErrorList(errorSchema),
-                };
-            }
-            this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
-        };
-        /**
-         * Callback function to handle reset form data.
-         * - Reset all fields with default values.
-         * - Reset validations and errors
-         *
-         */
-        this.reset = () => {
-            const { onChange } = this.props;
-            const newState = this.getStateFromProps(this.props, undefined);
-            const newFormData = newState.formData;
-            const state = {
-                formData: newFormData,
-                errorSchema: {},
-                errors: [],
-                schemaValidationErrors: [],
-                schemaValidationErrorSchema: {},
-            };
-            this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
-        };
-        /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
-         * was provided.
-         *
-         * @param id - The unique `id` of the field that was blurred
-         * @param data - The data associated with the field that was blurred
-         */
-        this.onBlur = (id, data) => {
-            const { onBlur } = this.props;
-            if (onBlur) {
-                onBlur(id, data);
-            }
-        };
-        /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
-         * was provided.
-         *
-         * @param id - The unique `id` of the field that was focused
-         * @param data - The data associated with the field that was focused
-         */
-        this.onFocus = (id, data) => {
-            const { onFocus } = this.props;
-            if (onFocus) {
-                onFocus(id, data);
-            }
-        };
-        /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
-         * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
-         * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
-         * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
-         * back the `onSubmit` callback if it was provided.
-         *
-         * @param event - The submit HTML form event
-         */
-        this.onSubmit = (event) => {
-            event.preventDefault();
-            if (event.target !== event.currentTarget) {
-                return;
-            }
-            event.persist();
-            const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
-            let { formData: newFormData } = this.state;
-            if (omitExtraData === true) {
-                newFormData = this.omitExtraData(newFormData);
-            }
-            if (noValidate || this.validateFormWithFormData(newFormData)) {
-                // There are no errors generated through schema validation.
-                // Check for user provided errors and update state accordingly.
-                const errorSchema = extraErrors || {};
-                const errors = extraErrors ? toErrorList(extraErrors) : [];
-                this.setState({
-                    formData: newFormData,
-                    errors,
-                    errorSchema,
-                    schemaValidationErrors: [],
-                    schemaValidationErrorSchema: {},
-                }, () => {
-                    if (onSubmit) {
-                        onSubmit({ ...this.state, formData: newFormData, status: 'submitted' }, event);
-                    }
-                });
-            }
-        };
-        /** Provides a function that can be used to programmatically submit the `Form` */
-        this.submit = () => {
-            if (this.formElement.current) {
-                const submitCustomEvent = new CustomEvent('submit', {
-                    cancelable: true,
-                });
-                submitCustomEvent.preventDefault();
-                this.formElement.current.dispatchEvent(submitCustomEvent);
-                this.formElement.current.requestSubmit();
-            }
-        };
-        /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
-         * If `onError` is provided, then it will be called with the list of errors.
-         *
-         * @param formData - The form data to validate
-         * @returns - True if the form is valid, false otherwise.
-         */
-        this.validateFormWithFormData = (formData) => {
-            const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-            const { errors: prevErrors } = this.state;
-            const schemaValidation = this.validate(formData);
-            let errors = schemaValidation.errors;
-            let errorSchema = schemaValidation.errorSchema;
-            const schemaValidationErrors = errors;
-            const schemaValidationErrorSchema = errorSchema;
-            const hasError = errors.length > 0 || (extraErrors && extraErrorsBlockSubmit);
-            if (hasError) {
-                if (extraErrors) {
-                    const merged = validationDataMerge(schemaValidation, extraErrors);
-                    errorSchema = merged.errorSchema;
-                    errors = merged.errors;
-                }
-                if (focusOnFirstError) {
-                    if (typeof focusOnFirstError === 'function') {
-                        focusOnFirstError(errors[0]);
-                    }
-                    else {
-                        this.focusOnError(errors[0]);
-                    }
-                }
-                this.setState({
-                    errors,
-                    errorSchema,
-                    schemaValidationErrors,
-                    schemaValidationErrorSchema,
-                }, () => {
-                    if (onError) {
-                        onError(errors);
-                    }
-                    else {
-                        console.error('Form validation failed', errors);
-                    }
-                });
-            }
-            else if (prevErrors.length > 0) {
-                this.setState({
-                    errors: [],
-                    errorSchema: {},
-                    schemaValidationErrors: [],
-                    schemaValidationErrorSchema: {},
-                });
-            }
-            return !hasError;
-        };
         if (!props.validator) {
             throw new Error('A validator is required for Form functionality to work');
         }
@@ -374,7 +104,6 @@ export default class Form extends Component {
      * @returns - The new state for the `Form`
      */
     getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
-        var _a;
         const state = this.state || {};
         const schema = 'schema' in props ? props.schema : this.props.schema;
         const uiSchema = ('uiSchema' in props ? props.uiSchema : this.props.uiSchema) || {};
@@ -394,7 +123,7 @@ export default class Form extends Component {
             schemaUtils = createSchemaUtils(props.validator, rootSchema, experimental_defaultFormStateBehavior, experimental_customMergeAllOf);
         }
         const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-        const _retrievedSchema = this.updateRetrievedSchema(retrievedSchema !== null && retrievedSchema !== void 0 ? retrievedSchema : schemaUtils.retrieveSchema(schema, formData));
+        const _retrievedSchema = this.updateRetrievedSchema(retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData));
         const getCurrentErrors = () => {
             // If the `props.noValidate` option is set or the schema has changed, we reset the error state.
             if (props.noValidate || isSchemaChanged) {
@@ -424,7 +153,7 @@ export default class Form extends Component {
                 errorSchema = schemaValidation.errorSchema;
             }
             else {
-                errorSchema = mergeObjects((_a = this.state) === null || _a === void 0 ? void 0 : _a.errorSchema, schemaValidation.errorSchema, 'preventDuplicates');
+                errorSchema = mergeObjects(this.state?.errorSchema, schemaValidation.errorSchema, 'preventDuplicates');
             }
             schemaValidationErrors = errors;
             schemaValidationErrorSchema = errorSchema;
@@ -496,7 +225,7 @@ export default class Form extends Component {
     validate(formData, schema = this.props.schema, altSchemaUtils, retrievedSchema) {
         const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
         const { customValidate, transformErrors, uiSchema } = this.props;
-        const resolvedSchema = retrievedSchema !== null && retrievedSchema !== void 0 ? retrievedSchema : schemaUtils.retrieveSchema(schema, formData);
+        const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
         return schemaUtils
             .getValidator()
             .validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
@@ -512,15 +241,80 @@ export default class Form extends Component {
         }
         return null;
     }
+    /** Returns the `formData` with only the elements specified in the `fields` list
+     *
+     * @param formData - The data for the `Form`
+     * @param fields - The fields to keep while filtering
+     */
+    getUsedFormData = (formData, fields) => {
+        // For the case of a single input form
+        if (fields.length === 0 && typeof formData !== 'object') {
+            return formData;
+        }
+        // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
+        const data = _pick(formData, fields);
+        if (Array.isArray(formData)) {
+            return Object.keys(data).map((key) => data[key]);
+        }
+        return data;
+    };
+    /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
+     *
+     * @param pathSchema - The `PathSchema` object for the form
+     * @param [formData] - The form data to use while checking for empty objects/arrays
+     */
+    getFieldNames = (pathSchema, formData) => {
+        const getAllPaths = (_obj, acc = [], paths = [[]]) => {
+            Object.keys(_obj).forEach((key) => {
+                if (typeof _obj[key] === 'object') {
+                    const newPaths = paths.map((path) => [...path, key]);
+                    // If an object is marked with additionalProperties, all its keys are valid
+                    if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
+                        acc.push(_obj[key][NAME_KEY]);
+                    }
+                    else {
+                        getAllPaths(_obj[key], acc, newPaths);
+                    }
+                }
+                else if (key === NAME_KEY && _obj[key] !== '') {
+                    paths.forEach((path) => {
+                        const formValue = _get(formData, path);
+                        // adds path to fieldNames if it points to a value
+                        // or an empty object/array
+                        if (typeof formValue !== 'object' ||
+                            _isEmpty(formValue) ||
+                            (Array.isArray(formValue) && formValue.every((val) => typeof val !== 'object'))) {
+                            acc.push(path);
+                        }
+                    });
+                }
+            });
+            return acc;
+        };
+        return getAllPaths(pathSchema);
+    };
+    /** Returns the `formData` after filtering to remove any extra data not in a form field
+     *
+     * @param formData - The data for the `Form`
+     * @returns The `formData` after omitting extra data
+     */
+    omitExtraData = (formData) => {
+        const { schema, schemaUtils } = this.state;
+        const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
+        const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
+        const fieldNames = this.getFieldNames(pathSchema, formData);
+        const newFormData = this.getUsedFormData(formData, fieldNames);
+        return newFormData;
+    };
     // Filtering errors based on your retrieved schema to only show errors for properties in the selected branch.
     filterErrorsBasedOnSchema(schemaErrors, resolvedSchema, formData) {
         const { retrievedSchema, schemaUtils } = this.state;
-        const _retrievedSchema = resolvedSchema !== null && resolvedSchema !== void 0 ? resolvedSchema : retrievedSchema;
+        const _retrievedSchema = resolvedSchema ?? retrievedSchema;
         const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, '', formData);
         const fieldNames = this.getFieldNames(pathSchema, formData);
         const filteredErrors = _pick(schemaErrors, fieldNames);
         // If the root schema is of a primitive type, do not filter out the __errors
-        if ((resolvedSchema === null || resolvedSchema === void 0 ? void 0 : resolvedSchema.type) !== 'object' && (resolvedSchema === null || resolvedSchema === void 0 ? void 0 : resolvedSchema.type) !== 'array') {
+        if (resolvedSchema?.type !== 'object' && resolvedSchema?.type !== 'array') {
             filteredErrors.__errors = schemaErrors.__errors;
         }
         const prevCustomValidateErrors = this.getPreviousCustomValidateErrors();
@@ -542,7 +336,7 @@ export default class Form extends Component {
                 }
                 else if (isObject(errorAtKey) &&
                     isObject(prevCustomValidateErrorAtKey) &&
-                    Array.isArray(prevCustomValidateErrorAtKey === null || prevCustomValidateErrorAtKey === void 0 ? void 0 : prevCustomValidateErrorAtKey.__errors)) {
+                    Array.isArray(prevCustomValidateErrorAtKey?.__errors)) {
                     // if previous customValidate error is an object and has __errors array, filter out the errors previous customValidate errors.
                     errors[errorKey] = filterPreviousCustomErrors(errorAtKey.__errors, prevCustomValidateErrorAtKey.__errors);
                 }
@@ -554,6 +348,71 @@ export default class Form extends Component {
         };
         return filterNilOrEmptyErrors(filteredErrors, prevCustomValidateErrors);
     }
+    /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
+     * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
+     * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not
+     * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
+     * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
+     * callback will be called if specified with the updated state.
+     *
+     * @param formData - The new form data from a change to a field
+     * @param newErrorSchema - The new `ErrorSchema` based on the field change
+     * @param id - The id of the field that caused the change
+     */
+    onChange = (formData, newErrorSchema, id) => {
+        const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+        const { schemaUtils, schema } = this.state;
+        let retrievedSchema = this.state.retrievedSchema;
+        if (isObject(formData) || Array.isArray(formData)) {
+            const newState = this.getStateFromProps(this.props, formData);
+            formData = newState.formData;
+            retrievedSchema = newState.retrievedSchema;
+        }
+        const mustValidate = !noValidate && liveValidate;
+        let state = { formData, schema };
+        let newFormData = formData;
+        if (omitExtraData === true && liveOmit === true) {
+            newFormData = this.omitExtraData(formData);
+            state = {
+                formData: newFormData,
+            };
+        }
+        if (mustValidate) {
+            const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);
+            let errors = schemaValidation.errors;
+            let errorSchema = schemaValidation.errorSchema;
+            const schemaValidationErrors = errors;
+            const schemaValidationErrorSchema = errorSchema;
+            if (extraErrors) {
+                const merged = validationDataMerge(schemaValidation, extraErrors);
+                errorSchema = merged.errorSchema;
+                errors = merged.errors;
+            }
+            // Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
+            if (newErrorSchema) {
+                const filteredErrors = this.filterErrorsBasedOnSchema(newErrorSchema, retrievedSchema, newFormData);
+                errorSchema = mergeObjects(errorSchema, filteredErrors, 'preventDuplicates');
+            }
+            state = {
+                formData: newFormData,
+                errors,
+                errorSchema,
+                schemaValidationErrors,
+                schemaValidationErrorSchema,
+            };
+        }
+        else if (!noValidate && newErrorSchema) {
+            const errorSchema = extraErrors
+                ? mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates')
+                : newErrorSchema;
+            state = {
+                formData: newFormData,
+                errorSchema: errorSchema,
+                errors: toErrorList(errorSchema),
+            };
+        }
+        this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
+    };
     /**
      * If the retrievedSchema has changed the new retrievedSchema is returned.
      * Otherwise, the old retrievedSchema is returned to persist reference.
@@ -564,13 +423,91 @@ export default class Form extends Component {
      * @returns The new retrieved schema if it has changed, else the old retrieved schema.
      */
     updateRetrievedSchema(retrievedSchema) {
-        var _a;
-        const isTheSame = deepEquals(retrievedSchema, (_a = this.state) === null || _a === void 0 ? void 0 : _a.retrievedSchema);
+        const isTheSame = deepEquals(retrievedSchema, this.state?.retrievedSchema);
         return isTheSame ? this.state.retrievedSchema : retrievedSchema;
     }
+    /**
+     * Callback function to handle reset form data.
+     * - Reset all fields with default values.
+     * - Reset validations and errors
+     *
+     */
+    reset = () => {
+        const { onChange } = this.props;
+        const newState = this.getStateFromProps(this.props, undefined);
+        const newFormData = newState.formData;
+        const state = {
+            formData: newFormData,
+            errorSchema: {},
+            errors: [],
+            schemaValidationErrors: [],
+            schemaValidationErrorSchema: {},
+        };
+        this.setState(state, () => onChange && onChange({ ...this.state, ...state }));
+    };
+    /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
+     * was provided.
+     *
+     * @param id - The unique `id` of the field that was blurred
+     * @param data - The data associated with the field that was blurred
+     */
+    onBlur = (id, data) => {
+        const { onBlur } = this.props;
+        if (onBlur) {
+            onBlur(id, data);
+        }
+    };
+    /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
+     * was provided.
+     *
+     * @param id - The unique `id` of the field that was focused
+     * @param data - The data associated with the field that was focused
+     */
+    onFocus = (id, data) => {
+        const { onFocus } = this.props;
+        if (onFocus) {
+            onFocus(id, data);
+        }
+    };
+    /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
+     * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
+     * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
+     * via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
+     * back the `onSubmit` callback if it was provided.
+     *
+     * @param event - The submit HTML form event
+     */
+    onSubmit = (event) => {
+        event.preventDefault();
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.persist();
+        const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+        let { formData: newFormData } = this.state;
+        if (omitExtraData === true) {
+            newFormData = this.omitExtraData(newFormData);
+        }
+        if (noValidate || this.validateFormWithFormData(newFormData)) {
+            // There are no errors generated through schema validation.
+            // Check for user provided errors and update state accordingly.
+            const errorSchema = extraErrors || {};
+            const errors = extraErrors ? toErrorList(extraErrors) : [];
+            this.setState({
+                formData: newFormData,
+                errors,
+                errorSchema,
+                schemaValidationErrors: [],
+                schemaValidationErrorSchema: {},
+            }, () => {
+                if (onSubmit) {
+                    onSubmit({ ...this.state, formData: newFormData, status: 'submitted' }, event);
+                }
+            });
+        }
+    };
     /** Returns the registry for the form */
     getRegistry() {
-        var _a;
         const { translateString: customTranslateString, uiSchema = {} } = this.props;
         const { schemaUtils } = this.state;
         const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry();
@@ -581,7 +518,7 @@ export default class Form extends Component {
                 ...this.props.templates,
                 ButtonTemplates: {
                     ...templates.ButtonTemplates,
-                    ...(_a = this.props.templates) === null || _a === void 0 ? void 0 : _a.ButtonTemplates,
+                    ...this.props.templates?.ButtonTemplates,
                 },
             },
             widgets: { ...widgets, ...this.props.widgets },
@@ -592,6 +529,17 @@ export default class Form extends Component {
             globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
         };
     }
+    /** Provides a function that can be used to programmatically submit the `Form` */
+    submit = () => {
+        if (this.formElement.current) {
+            const submitCustomEvent = new CustomEvent('submit', {
+                cancelable: true,
+            });
+            submitCustomEvent.preventDefault();
+            this.formElement.current.dispatchEvent(submitCustomEvent);
+            this.formElement.current.requestSubmit();
+        }
+    };
     /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
      * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
      * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
@@ -624,6 +572,59 @@ export default class Form extends Component {
             field.focus();
         }
     }
+    /** Validates the form using the given `formData`. For use on form submission or on programmatic validation.
+     * If `onError` is provided, then it will be called with the list of errors.
+     *
+     * @param formData - The form data to validate
+     * @returns - True if the form is valid, false otherwise.
+     */
+    validateFormWithFormData = (formData) => {
+        const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
+        const { errors: prevErrors } = this.state;
+        const schemaValidation = this.validate(formData);
+        let errors = schemaValidation.errors;
+        let errorSchema = schemaValidation.errorSchema;
+        const schemaValidationErrors = errors;
+        const schemaValidationErrorSchema = errorSchema;
+        const hasError = errors.length > 0 || (extraErrors && extraErrorsBlockSubmit);
+        if (hasError) {
+            if (extraErrors) {
+                const merged = validationDataMerge(schemaValidation, extraErrors);
+                errorSchema = merged.errorSchema;
+                errors = merged.errors;
+            }
+            if (focusOnFirstError) {
+                if (typeof focusOnFirstError === 'function') {
+                    focusOnFirstError(errors[0]);
+                }
+                else {
+                    this.focusOnError(errors[0]);
+                }
+            }
+            this.setState({
+                errors,
+                errorSchema,
+                schemaValidationErrors,
+                schemaValidationErrorSchema,
+            }, () => {
+                if (onError) {
+                    onError(errors);
+                }
+                else {
+                    console.error('Form validation failed', errors);
+                }
+            });
+        }
+        else if (prevErrors.length > 0) {
+            this.setState({
+                errors: [],
+                errorSchema: {},
+                schemaValidationErrors: [],
+                schemaValidationErrorSchema: {},
+            });
+        }
+        return !hasError;
+    };
     /** Programmatically validate the form.  If `omitExtraData` is true, the `formData` will first be filtered to remove
      * any extra data not in a form field. If `onError` is provided, then it will be called with the list of errors the
      * same way as would happen on form submission.
@@ -660,4 +661,3 @@ export default class Form extends Component {
         return (_jsxs(FormTag, { className: className ? className : 'rjsf', id: id, name: name, method: method, target: target, action: action, autoComplete: autoComplete, encType: enctype, acceptCharset: acceptCharset || acceptcharset, noValidate: noHtml5Validate, onSubmit: this.onSubmit, as: as, ref: this.formElement, children: [showErrorList === 'top' && this.renderErrors(registry), _jsx(_SchemaField, { name: '', schema: schema, uiSchema: uiSchema, errorSchema: errorSchema, idSchema: idSchema, idPrefix: idPrefix, idSeparator: idSeparator, formContext: formContext, formData: formData, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, registry: registry, disabled: disabled, readonly: readonly }), children ? children : _jsx(SubmitButton, { uiSchema: submitUiSchema, registry: registry }), showErrorList === 'bottom' && this.renderErrors(registry)] }));
     }
 }
-//# sourceMappingURL=Form.js.map