@rjsf/core 6.0.0-beta.11 → 6.0.0-beta.13

package/dist/core.umd.js

@@ -2291,7 +2291,8 @@
   }
   var SchemaField = class extends react.Component {
     shouldComponentUpdate(nextProps) {
-      return !utils.deepEquals(this.props, nextProps);
+      const { experimental_componentUpdateStrategy = "customDeep" } = this.props.registry;
+      return utils.shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
     }
     render() {
       return /* @__PURE__ */ jsxRuntime.jsx(SchemaFieldRender, { ...this.props });
@@ -3891,30 +3892,31 @@
     getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
       const state = this.state || {};
       const schema = "schema" in props ? props.schema : this.props.schema;
+      const validator = "validator" in props ? props.validator : this.props.validator;
       const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
       const edit = typeof inputFormData !== "undefined";
       const liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
       const mustValidate = edit && !props.noValidate && liveValidate;
-      const rootSchema = schema;
       const experimental_defaultFormStateBehavior = "experimental_defaultFormStateBehavior" in props ? props.experimental_defaultFormStateBehavior : this.props.experimental_defaultFormStateBehavior;
       const experimental_customMergeAllOf = "experimental_customMergeAllOf" in props ? props.experimental_customMergeAllOf : this.props.experimental_customMergeAllOf;
       let schemaUtils = state.schemaUtils;
       if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(
-        props.validator,
-        rootSchema,
+        validator,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf
       )) {
         schemaUtils = utils.createSchemaUtils(
-          props.validator,
-          rootSchema,
+          validator,
+          schema,
           experimental_defaultFormStateBehavior,
           experimental_customMergeAllOf
         );
       }
-      const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
+      const rootSchema = schemaUtils.getRootSchema();
+      const formData = schemaUtils.getDefaultFormState(rootSchema, inputFormData);
       const _retrievedSchema = this.updateRetrievedSchema(
-        retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+        retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
       );
       const getCurrentErrors = () => {
         if (props.noValidate || isSchemaChanged) {
@@ -3935,7 +3937,7 @@
       let schemaValidationErrors = state.schemaValidationErrors;
       let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
       if (mustValidate) {
-        const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
+        const schemaValidation = this.validate(formData, rootSchema, schemaUtils, _retrievedSchema);
         errors = schemaValidation.errors;
         if (retrievedSchema === void 0) {
           errorSchema = schemaValidation.errorSchema;
@@ -3981,7 +3983,7 @@
       );
       const nextState = {
         schemaUtils,
-        schema,
+        schema: rootSchema,
         uiSchema,
         idSchema,
         formData,
@@ -4001,7 +4003,8 @@
      * @returns - True if the component should be updated, false otherwise
      */
     shouldComponentUpdate(nextProps, nextState) {
-      return utils.shouldRender(this, nextProps, nextState);
+      const { experimental_componentUpdateStrategy = "customDeep" } = this.props;
+      return utils.shouldRender(this, nextProps, nextState, experimental_componentUpdateStrategy);
     }
     /** Gets the previously raised customValidate errors.
      *
@@ -4025,7 +4028,7 @@
      * @param schema - The schema used to validate against
      * @param altSchemaUtils - The alternate schemaUtils to use for validation
      */
-    validate(formData, schema = this.props.schema, altSchemaUtils, retrievedSchema) {
+    validate(formData, schema = this.state.schema, altSchemaUtils, retrievedSchema) {
       const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
       const { customValidate, transformErrors, uiSchema } = this.props;
       const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
@@ -4299,8 +4302,12 @@
     };
     /** Returns the registry for the form */
     getRegistry() {
-      const { translateString: customTranslateString, uiSchema = {} } = this.props;
-      const { schemaUtils } = this.state;
+      const {
+        translateString: customTranslateString,
+        uiSchema = {},
+        experimental_componentUpdateStrategy = "customDeep"
+      } = this.props;
+      const { schema, schemaUtils } = this.state;
       const { fields: fields2, templates: templates2, widgets: widgets2, formContext, translateString } = getDefaultRegistry();
       return {
         fields: { ...fields2, ...this.props.fields },
@@ -4313,11 +4320,12 @@
           }
         },
         widgets: { ...widgets2, ...this.props.widgets },
-        rootSchema: this.props.schema,
+        rootSchema: schema,
         formContext: this.props.formContext || formContext,
         schemaUtils,
         translateString: customTranslateString || translateString,
-        globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY]
+        globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY],
+        experimental_componentUpdateStrategy
       };
     }
     /** Provides a function that can be used to programmatically submit the `Form` */

package/dist/index.esm.js

@@ -2,7 +2,7 @@
 import { Component as Component5, createRef } from "react";
 import {
   createSchemaUtils,
-  deepEquals as deepEquals3,
+  deepEquals as deepEquals2,
   getChangedFields,
   getTemplate as getTemplate25,
   getUiOptions as getUiOptions17,
@@ -10,7 +10,7 @@ import {
   mergeObjects as mergeObjects3,
   NAME_KEY,
   RJSF_ADDITIONAL_PROPERTIES_FLAG,
-  shouldRender,
+  shouldRender as shouldRender2,
   SUBMIT_BTN_OPTIONS_KEY,
   toErrorList,
   UI_GLOBAL_OPTIONS_KEY as UI_GLOBAL_OPTIONS_KEY2,
@@ -2214,13 +2214,13 @@ var ObjectField_default = ObjectField;
 import { useCallback as useCallback2, Component as Component4 } from "react";
 import {
   ADDITIONAL_PROPERTY_FLAG as ADDITIONAL_PROPERTY_FLAG2,
-  deepEquals as deepEquals2,
   descriptionId,
   getSchemaType,
   getTemplate as getTemplate7,
   getUiOptions as getUiOptions8,
   ID_KEY as ID_KEY3,
   mergeObjects as mergeObjects2,
+  shouldRender,
   TranslatableString as TranslatableString5,
   UI_OPTIONS_KEY as UI_OPTIONS_KEY2
 } from "@rjsf/utils";
@@ -2477,7 +2477,8 @@ function SchemaFieldRender(props) {
 }
 var SchemaField = class extends Component4 {
   shouldComponentUpdate(nextProps) {
-    return !deepEquals2(this.props, nextProps);
+    const { experimental_componentUpdateStrategy = "customDeep" } = this.props.registry;
+    return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
   }
   render() {
     return /* @__PURE__ */ jsx9(SchemaFieldRender, { ...this.props });
@@ -4269,7 +4270,7 @@ var Form = class extends Component5 {
       throw new Error("A validator is required for Form functionality to work");
     }
     this.state = this.getStateFromProps(props, props.formData);
-    if (this.props.onChange && !deepEquals3(this.state.formData, this.props.formData)) {
+    if (this.props.onChange && !deepEquals2(this.state.formData, this.props.formData)) {
       this.props.onChange(this.state);
     }
     this.formElement = createRef();
@@ -4293,10 +4294,10 @@ var Form = class extends Component5 {
    *        with a flag indicating that an update is not necessary.
    */
   getSnapshotBeforeUpdate(prevProps, prevState) {
-    if (!deepEquals3(this.props, prevProps)) {
+    if (!deepEquals2(this.props, prevProps)) {
       const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
-      const isSchemaChanged = !deepEquals3(prevProps.schema, this.props.schema);
-      const isFormDataChanged = formDataChangedFields.length > 0 || !deepEquals3(prevProps.formData, this.props.formData);
+      const isSchemaChanged = !deepEquals2(prevProps.schema, this.props.schema);
+      const isFormDataChanged = formDataChangedFields.length > 0 || !deepEquals2(prevProps.formData, this.props.formData);
       const nextState = this.getStateFromProps(
         this.props,
         this.props.formData,
@@ -4307,7 +4308,7 @@ var Form = class extends Component5 {
         isSchemaChanged,
         formDataChangedFields
       );
-      const shouldUpdate = !deepEquals3(nextState, prevState);
+      const shouldUpdate = !deepEquals2(nextState, prevState);
       return { nextState, shouldUpdate };
     }
     return { shouldUpdate: false };
@@ -4327,7 +4328,7 @@ var Form = class extends Component5 {
   componentDidUpdate(_, prevState, snapshot) {
     if (snapshot.shouldUpdate) {
       const { nextState } = snapshot;
-      if (!deepEquals3(nextState.formData, this.props.formData) && !deepEquals3(nextState.formData, prevState.formData) && this.props.onChange) {
+      if (!deepEquals2(nextState.formData, this.props.formData) && !deepEquals2(nextState.formData, prevState.formData) && this.props.onChange) {
         this.props.onChange(nextState);
       }
       this.setState(nextState);
@@ -4347,30 +4348,31 @@ var Form = class extends Component5 {
   getStateFromProps(props, inputFormData, retrievedSchema, isSchemaChanged = false, formDataChangedFields = []) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
+    const validator = "validator" in props ? props.validator : this.props.validator;
     const uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
     const edit = typeof inputFormData !== "undefined";
     const liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
     const mustValidate = edit && !props.noValidate && liveValidate;
-    const rootSchema = schema;
     const experimental_defaultFormStateBehavior = "experimental_defaultFormStateBehavior" in props ? props.experimental_defaultFormStateBehavior : this.props.experimental_defaultFormStateBehavior;
     const experimental_customMergeAllOf = "experimental_customMergeAllOf" in props ? props.experimental_customMergeAllOf : this.props.experimental_customMergeAllOf;
     let schemaUtils = state.schemaUtils;
     if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(
-      props.validator,
-      rootSchema,
+      validator,
+      schema,
       experimental_defaultFormStateBehavior,
       experimental_customMergeAllOf
     )) {
       schemaUtils = createSchemaUtils(
-        props.validator,
-        rootSchema,
+        validator,
+        schema,
         experimental_defaultFormStateBehavior,
         experimental_customMergeAllOf
       );
     }
-    const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
+    const rootSchema = schemaUtils.getRootSchema();
+    const formData = schemaUtils.getDefaultFormState(rootSchema, inputFormData);
     const _retrievedSchema = this.updateRetrievedSchema(
-      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+      retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData)
     );
     const getCurrentErrors = () => {
       if (props.noValidate || isSchemaChanged) {
@@ -4391,7 +4393,7 @@ var Form = class extends Component5 {
     let schemaValidationErrors = state.schemaValidationErrors;
     let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
     if (mustValidate) {
-      const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
+      const schemaValidation = this.validate(formData, rootSchema, schemaUtils, _retrievedSchema);
       errors = schemaValidation.errors;
       if (retrievedSchema === void 0) {
         errorSchema = schemaValidation.errorSchema;
@@ -4437,7 +4439,7 @@ var Form = class extends Component5 {
     );
     const nextState = {
       schemaUtils,
-      schema,
+      schema: rootSchema,
       uiSchema,
       idSchema,
       formData,
@@ -4457,7 +4459,8 @@ var Form = class extends Component5 {
    * @returns - True if the component should be updated, false otherwise
    */
   shouldComponentUpdate(nextProps, nextState) {
-    return shouldRender(this, nextProps, nextState);
+    const { experimental_componentUpdateStrategy = "customDeep" } = this.props;
+    return shouldRender2(this, nextProps, nextState, experimental_componentUpdateStrategy);
   }
   /** Gets the previously raised customValidate errors.
    *
@@ -4481,7 +4484,7 @@ var Form = class extends Component5 {
    * @param schema - The schema used to validate against
    * @param altSchemaUtils - The alternate schemaUtils to use for validation
    */
-  validate(formData, schema = this.props.schema, altSchemaUtils, retrievedSchema) {
+  validate(formData, schema = this.state.schema, altSchemaUtils, retrievedSchema) {
     const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
     const { customValidate, transformErrors, uiSchema } = this.props;
     const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
@@ -4669,7 +4672,7 @@ var Form = class extends Component5 {
    * @returns The new retrieved schema if it has changed, else the old retrieved schema.
    */
   updateRetrievedSchema(retrievedSchema) {
-    const isTheSame = deepEquals3(retrievedSchema, this.state?.retrievedSchema);
+    const isTheSame = deepEquals2(retrievedSchema, this.state?.retrievedSchema);
     return isTheSame ? this.state.retrievedSchema : retrievedSchema;
   }
   /**
@@ -4755,8 +4758,12 @@ var Form = class extends Component5 {
   };
   /** Returns the registry for the form */
   getRegistry() {
-    const { translateString: customTranslateString, uiSchema = {} } = this.props;
-    const { schemaUtils } = this.state;
+    const {
+      translateString: customTranslateString,
+      uiSchema = {},
+      experimental_componentUpdateStrategy = "customDeep"
+    } = this.props;
+    const { schema, schemaUtils } = this.state;
     const { fields: fields2, templates: templates2, widgets: widgets2, formContext, translateString } = getDefaultRegistry();
     return {
       fields: { ...fields2, ...this.props.fields },
@@ -4769,11 +4776,12 @@ var Form = class extends Component5 {
         }
       },
       widgets: { ...widgets2, ...this.props.widgets },
-      rootSchema: this.props.schema,
+      rootSchema: schema,
       formContext: this.props.formContext || formContext,
       schemaUtils,
       translateString: customTranslateString || translateString,
-      globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY2]
+      globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY2],
+      experimental_componentUpdateStrategy
     };
   }
   /** Provides a function that can be used to programmatically submit the `Form` */