@rjsf/core 5.23.2 → 5.24.1

package/dist/core.umd.js

@@ -3063,10 +3063,12 @@
        */
       this.onChange = (formData, newErrorSchema, id) => {
         const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-        const { schemaUtils, schema, retrievedSchema } = this.state;
+        const { schemaUtils, schema } = this.state;
+        let retrievedSchema = this.state.retrievedSchema;
         if (utils.isObject(formData) || Array.isArray(formData)) {
-          const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
+          const newState = this.getStateFromProps(this.props, formData);
           formData = newState.formData;
+          retrievedSchema = newState.retrievedSchema;
         }
         const mustValidate = !noValidate && liveValidate;
         let state = { formData, schema };
@@ -3283,8 +3285,9 @@
      */
     getSnapshotBeforeUpdate(prevProps, prevState) {
       if (!utils.deepEquals(this.props, prevProps)) {
+        const formDataChangedFields = utils.getChangedFields(this.props.formData, prevProps.formData);
         const isSchemaChanged = !utils.deepEquals(prevProps.schema, this.props.schema);
-        const isFormDataChanged = !utils.deepEquals(prevProps.formData, this.props.formData);
+        const isFormDataChanged = formDataChangedFields.length > 0 || !utils.deepEquals(prevProps.formData, this.props.formData);
         const nextState = this.getStateFromProps(
           this.props,
           this.props.formData,
@@ -3292,7 +3295,8 @@
           // Or if the `formData` changes, for example in the case of a schema with dependencies that need to
           //  match one of the subSchemas, the retrieved schema must be updated.
           isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
-          isSchemaChanged
+          isSchemaChanged,
+          formDataChangedFields
         );
         const shouldUpdate = !utils.deepEquals(nextState, prevState);
         return { nextState, shouldUpdate };
@@ -3331,9 +3335,10 @@
      * @param inputFormData - The new or current data for the `Form`
      * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
      * @param isSchemaChanged - A flag indicating whether the schema has changed.
+     * @param formDataChangedFields - The changed fields of `formData`
      * @returns - The new state for the `Form`
      */
-    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false) {
+    getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
       const state = this.state || {};
       const schema = "schema" in props ? props.schema : this.props.schema;
       const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
@@ -3358,7 +3363,9 @@
         );
       }
       const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-      const _retrievedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+      const _retrievedSchema = this.updateRetrievedSchema(
+        retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+      );
       const getCurrentErrors = () => {
         if (props.noValidate || isSchemaChanged) {
           return { errors: [], errorSchema: {} };
@@ -3395,6 +3402,17 @@
         const currentErrors = getCurrentErrors();
         errors = currentErrors.errors;
         errorSchema = currentErrors.errorSchema;
+        if (formDataChangedFields.length > 0) {
+          const newErrorSchema = formDataChangedFields.reduce((acc, key) => {
+            acc[key] = void 0;
+            return acc;
+          }, {});
+          errorSchema = schemaValidationErrorSchema = utils.mergeObjects(
+            currentErrors.errorSchema,
+            newErrorSchema,
+            "preventDuplicates"
+          );
+        }
       }
       if (props.extraErrors) {
         const merged = utils.validationDataMerge({ errorSchema, errors }, props.extraErrors);
@@ -3488,6 +3506,19 @@
       };
       return filterNilOrEmptyErrors(filteredErrors);
     }
+    /**
+     * If the retrievedSchema has changed the new retrievedSchema is returned.
+     * Otherwise, the old retrievedSchema is returned to persist reference.
+     * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+     *    avoiding the performance cost of recompiling the schema.
+     *
+     * @param retrievedSchema The new retrieved schema.
+     * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+     */
+    updateRetrievedSchema(retrievedSchema) {
+      const isTheSame = utils.deepEquals(retrievedSchema, this.state?.retrievedSchema);
+      return isTheSame ? this.state.retrievedSchema : retrievedSchema;
+    }
     /** Returns the registry for the form */
     getRegistry() {
       const { translateString: customTranslateString, uiSchema = {} } = this.props;

package/dist/index.esm.js

@@ -3,6 +3,7 @@ import { Component as Component5, createRef } from "react";
 import {
   createSchemaUtils,
   deepEquals as deepEquals3,
+  getChangedFields,
   getTemplate as getTemplate20,
   getUiOptions as getUiOptions12,
   isObject as isObject5,
@@ -3414,10 +3415,12 @@ var Form = class extends Component5 {
      */
     this.onChange = (formData, newErrorSchema, id) => {
       const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-      const { schemaUtils, schema, retrievedSchema } = this.state;
+      const { schemaUtils, schema } = this.state;
+      let retrievedSchema = this.state.retrievedSchema;
       if (isObject5(formData) || Array.isArray(formData)) {
-        const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
+        const newState = this.getStateFromProps(this.props, formData);
         formData = newState.formData;
+        retrievedSchema = newState.retrievedSchema;
       }
       const mustValidate = !noValidate && liveValidate;
       let state = { formData, schema };
@@ -3634,8 +3637,9 @@ var Form = class extends Component5 {
    */
   getSnapshotBeforeUpdate(prevProps, prevState) {
     if (!deepEquals3(this.props, prevProps)) {
+      const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
       const isSchemaChanged = !deepEquals3(prevProps.schema, this.props.schema);
-      const isFormDataChanged = !deepEquals3(prevProps.formData, this.props.formData);
+      const isFormDataChanged = formDataChangedFields.length > 0 || !deepEquals3(prevProps.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -3643,7 +3647,8 @@ var Form = class extends Component5 {
         // Or if the `formData` changes, for example in the case of a schema with dependencies that need to
         //  match one of the subSchemas, the retrieved schema must be updated.
         isSchemaChanged || isFormDataChanged ? void 0 : this.state.retrievedSchema,
-        isSchemaChanged
+        isSchemaChanged,
+        formDataChangedFields
       );
       const shouldUpdate = !deepEquals3(nextState, prevState);
       return { nextState, shouldUpdate };
@@ -3682,9 +3687,10 @@ var Form = class extends Component5 {
    * @param inputFormData - The new or current data for the `Form`
    * @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
    * @param isSchemaChanged - A flag indicating whether the schema has changed.
+   * @param formDataChangedFields - The changed fields of `formData`
    * @returns - The new state for the `Form`
    */
-  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false) {
+  getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
     const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
@@ -3709,7 +3715,9 @@ var Form = class extends Component5 {
       );
     }
     const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
-    const _retrievedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+    const _retrievedSchema = this.updateRetrievedSchema(
+      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+    );
     const getCurrentErrors = () => {
       if (props.noValidate || isSchemaChanged) {
         return { errors: [], errorSchema: {} };
@@ -3746,6 +3754,17 @@ var Form = class extends Component5 {
       const currentErrors = getCurrentErrors();
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
+      if (formDataChangedFields.length > 0) {
+        const newErrorSchema = formDataChangedFields.reduce((acc, key) => {
+          acc[key] = void 0;
+          return acc;
+        }, {});
+        errorSchema = schemaValidationErrorSchema = mergeObjects2(
+          currentErrors.errorSchema,
+          newErrorSchema,
+          "preventDuplicates"
+        );
+      }
     }
     if (props.extraErrors) {
       const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
@@ -3839,6 +3858,19 @@ var Form = class extends Component5 {
     };
     return filterNilOrEmptyErrors(filteredErrors);
   }
+  /**
+   * If the retrievedSchema has changed the new retrievedSchema is returned.
+   * Otherwise, the old retrievedSchema is returned to persist reference.
+   * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+   *    avoiding the performance cost of recompiling the schema.
+   *
+   * @param retrievedSchema The new retrieved schema.
+   * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+   */
+  updateRetrievedSchema(retrievedSchema) {
+    const isTheSame = deepEquals3(retrievedSchema, this.state?.retrievedSchema);
+    return isTheSame ? this.state.retrievedSchema : retrievedSchema;
+  }
   /** Returns the registry for the form */
   getRegistry() {
     const { translateString: customTranslateString, uiSchema = {} } = this.props;