@rjsf/core 5.18.5 → 5.19.0

package/dist/core.umd.js

@@ -1417,7 +1417,7 @@
     );
     const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
     const disabled = Boolean(uiOptions.disabled ?? props.disabled);
-    const readonly = Boolean(uiOptions.readonly ?? props.readonly ?? props.schema.readOnly ?? schema.readOnly);
+    const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
     const uiSchemaHideError = uiOptions.hideError;
     const hideError = uiSchemaHideError === void 0 ? props.hideError : Boolean(uiSchemaHideError);
     const autofocus = Boolean(uiOptions.autofocus ?? props.autofocus);
@@ -2288,13 +2288,6 @@
     };
   }
   var templates_default = templates;
-  function rangeOptions(start, stop) {
-    const options = [];
-    for (let i = start; i <= stop; i++) {
-      options.push({ value: i, label: utils.pad(i, 2) });
-    }
-    return options;
-  }
   function readyForChange(state) {
     return Object.values(state).every((value) => value !== -1);
   }
@@ -2321,7 +2314,7 @@
         id,
         name,
         className: "form-control",
-        options: { enumOptions: rangeOptions(range[0], range[1]) },
+        options: { enumOptions: utils.dateRangeOptions(range[0], range[1]) },
         placeholder: type,
         value,
         disabled,
@@ -3030,9 +3023,22 @@
         };
         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 filterer to remove any extra data not
+       * 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.
@@ -3051,12 +3057,8 @@
         const mustValidate = !noValidate && liveValidate;
         let state = { formData, schema };
         let newFormData = formData;
-        let _retrievedSchema;
         if (omitExtraData === true && liveOmit === true) {
-          _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-          const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
-          const fieldNames = this.getFieldNames(pathSchema, formData);
-          newFormData = this.getUsedFormData(formData, fieldNames);
+          newFormData = this.omitExtraData(formData);
           state = {
             formData: newFormData
           };
@@ -3087,9 +3089,6 @@
             errors: utils.toErrorList(errorSchema)
           };
         }
-        if (_retrievedSchema) {
-          state.retrievedSchema = _retrievedSchema;
-        }
         this.setState(state, () => onChange && onChange({ ...this.state, ...state }, id));
       };
       /**
@@ -3151,14 +3150,10 @@
         event.persist();
         const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
         let { formData: newFormData } = this.state;
-        const { schema, schemaUtils } = this.state;
         if (omitExtraData === true) {
-          const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-          const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
-          const fieldNames = this.getFieldNames(pathSchema, newFormData);
-          newFormData = this.getUsedFormData(newFormData, fieldNames);
+          newFormData = this.omitExtraData(newFormData);
         }
-        if (noValidate || this.validateForm()) {
+        if (noValidate || this.validateFormWithFormData(newFormData)) {
           const errorSchema = extraErrors || {};
           const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
           this.setState(
@@ -3188,6 +3183,59 @@
           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 = utils.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");
       }
@@ -3431,57 +3479,19 @@
         field.focus();
       }
     }
-    /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
+    /** 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.
      *
      * @returns - True if the form is valid, false otherwise.
      */
     validateForm() {
-      const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-      const { formData, 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 = utils.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: {}
-        });
+      const { omitExtraData } = this.props;
+      let { formData: newFormData } = this.state;
+      if (omitExtraData === true) {
+        newFormData = this.omitExtraData(newFormData);
       }
-      return !hasError;
+      return this.validateFormWithFormData(newFormData);
     }
     /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
      * needed along with the submit button or any children of the form.

package/dist/index.esm.js

@@ -1528,7 +1528,7 @@ function SchemaFieldRender(props) {
   );
   const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
   const disabled = Boolean(uiOptions.disabled ?? props.disabled);
-  const readonly = Boolean(uiOptions.readonly ?? props.readonly ?? props.schema.readOnly ?? schema.readOnly);
+  const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
   const uiSchemaHideError = uiOptions.hideError;
   const hideError = uiSchemaHideError === void 0 ? props.hideError : Boolean(uiSchemaHideError);
   const autofocus = Boolean(uiOptions.autofocus ?? props.autofocus);
@@ -2519,20 +2519,13 @@ var templates_default = templates;
 import { useCallback as useCallback4, useEffect as useEffect2, useReducer, useState as useState2 } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds2,
+  dateRangeOptions,
   parseDateString,
   toDateString,
-  pad,
   TranslatableString as TranslatableString11,
   getDateElementProps
 } from "@rjsf/utils";
 import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
-function rangeOptions(start, stop) {
-  const options = [];
-  for (let i = start; i <= stop; i++) {
-    options.push({ value: i, label: pad(i, 2) });
-  }
-  return options;
-}
 function readyForChange(state) {
   return Object.values(state).every((value) => value !== -1);
 }
@@ -2559,7 +2552,7 @@ function DateElement({
       id,
       name,
       className: "form-control",
-      options: { enumOptions: rangeOptions(range[0], range[1]) },
+      options: { enumOptions: dateRangeOptions(range[0], range[1]) },
       placeholder: type,
       value,
       disabled,
@@ -3379,9 +3372,22 @@ var Form = class extends Component5 {
       };
       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 filterer to remove any extra data not
+     * 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.
@@ -3402,10 +3408,7 @@ var Form = class extends Component5 {
       let newFormData = formData;
       let _retrievedSchema;
       if (omitExtraData === true && liveOmit === true) {
-        _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-        const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, "", formData);
-        const fieldNames = this.getFieldNames(pathSchema, formData);
-        newFormData = this.getUsedFormData(formData, fieldNames);
+        newFormData = this.omitExtraData(formData);
         state = {
           formData: newFormData
         };
@@ -3500,14 +3503,10 @@ var Form = class extends Component5 {
       event.persist();
       const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
       let { formData: newFormData } = this.state;
-      const { schema, schemaUtils } = this.state;
       if (omitExtraData === true) {
-        const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-        const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
-        const fieldNames = this.getFieldNames(pathSchema, newFormData);
-        newFormData = this.getUsedFormData(newFormData, fieldNames);
+        newFormData = this.omitExtraData(newFormData);
       }
-      if (noValidate || this.validateForm()) {
+      if (noValidate || this.validateFormWithFormData(newFormData)) {
         const errorSchema = extraErrors || {};
         const errors = extraErrors ? toErrorList(extraErrors) : [];
         this.setState(
@@ -3537,6 +3536,59 @@ var Form = class extends Component5 {
         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");
     }
@@ -3780,57 +3832,19 @@ var Form = class extends Component5 {
       field.focus();
     }
   }
-  /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
+  /** 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.
    *
    * @returns - True if the form is valid, false otherwise.
    */
   validateForm() {
-    const { extraErrors, extraErrorsBlockSubmit, focusOnFirstError, onError } = this.props;
-    const { formData, 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: {}
-      });
+    const { omitExtraData } = this.props;
+    let { formData: newFormData } = this.state;
+    if (omitExtraData === true) {
+      newFormData = this.omitExtraData(newFormData);
     }
-    return !hasError;
+    return this.validateFormWithFormData(newFormData);
   }
   /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
    * needed along with the submit button or any children of the form.