@rjsf/core 5.4.0 → 5.5.1

package/dist/core.umd.development.js

@@ -133,6 +133,9 @@
     function ArrayField(props) {
       var _this;
       _this = _Component.call(this, props) || this;
+      /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+       * that the schema is fixed and allows additional items.
+       */
       _this._getNewFormDataRow = function () {
         var _this$props = _this.props,
           schema = _this$props.schema,
@@ -145,14 +148,32 @@
         // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
         return schemaUtils.getDefaultFormState(itemSchema);
       };
+      /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+       * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+       * keyed data
+       *
+       * @param event - The event for the click
+       */
       _this.onAddClick = function (event) {
         _this._handleAddClick(event);
       };
+      /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
+       * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
+       * form data converted from the keyed data
+       *
+       * @param index - The index at which the add button is clicked
+       */
       _this.onAddIndexClick = function (index) {
         return function (event) {
           _this._handleAddClick(event, index);
         };
       };
+      /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
+       * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
+       * form data converted from the keyed data
+       *
+       * @param index - The index at which the copy button is clicked
+       */
       _this.onCopyIndexClick = function (index) {
         return function (event) {
           if (event) {
@@ -178,6 +199,12 @@
           });
         };
       };
+      /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
+       * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
+       * from the keyed data
+       *
+       * @param index - The index at which the remove button is clicked
+       */
       _this.onDropIndexClick = function (index) {
         return function (event) {
           if (event) {
@@ -211,6 +238,13 @@
           });
         };
       };
+      /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
+       * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
+       * plain form data converted from the keyed data
+       *
+       * @param index - The index of the item to move
+       * @param newIndex - The index to where the item is to be moved
+       */
       _this.onReorderClick = function (index, newIndex) {
         return function (event) {
           if (event) {
@@ -251,6 +285,11 @@
           });
         };
       };
+      /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
+       * `onChange` callback with the updated form data
+       *
+       * @param index - The index of the item being changed
+       */
       _this.onChangeForIndex = function (index) {
         return function (value, newErrorSchema, id) {
           var _extends2;
@@ -268,6 +307,7 @@
           onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends2 = {}, _extends2[index] = newErrorSchema, _extends2)), id);
         };
       };
+      /** Callback handler used to change the value for a checkbox */
       _this.onSelectChange = function (value) {
         var _this$props5 = _this.props,
           onChange = _this$props5.onChange,
@@ -351,10 +391,7 @@
         }
       }
       return addable;
-    }
-    /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
-     * that the schema is fixed and allows additional items.
-     */;
+    };
     /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
      * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
      * the state, and then returning `onChange()` with the plain form data converted from the keyed data
@@ -384,13 +421,7 @@
       }, function () {
         return onChange(keyedToPlainFormData(newKeyedFormData));
       });
-    }
-    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
-     * keyed data
-     *
-     * @param event - The event for the click
-     */;
+    };
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     _proto.render = function render() {
@@ -1011,6 +1042,12 @@
     function AnyOfField(props) {
       var _this;
       _this = _Component.call(this, props) || this;
+      /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
+       * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
+       * the `onChange` handler.
+       *
+       * @param option - The new option value being selected
+       */
       _this.onOptionChange = function (option) {
         var _this$state = _this.state,
           selectedOption = _this$state.selectedOption,
@@ -1106,13 +1143,7 @@
       // If the form data matches none of the options, use the currently selected
       // option, assuming it's available; otherwise use the first option
       return selectedOption || 0;
-    }
-    /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
-     * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
-     * the `onChange` handler.
-     *
-     * @param option - The new option value being selected
-     */;
+    };
     _proto.getFieldId = function getFieldId() {
       var _this$props4 = this.props,
         idSchema = _this$props4.idSchema,
@@ -1299,10 +1330,19 @@
         args[_key] = arguments[_key];
       }
       _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+      /** Set up the initial state */
       _this.state = {
         wasPropertyKeyModified: false,
         additionalProperties: {}
       };
+      /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
+       * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
+       * formData.
+       *
+       * @param name - The name of the property
+       * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
+       * @returns - The onPropertyChange callback for the `name` property
+       */
       _this.onPropertyChange = function (name, addedByAdditionalProperties) {
         if (addedByAdditionalProperties === void 0) {
           addedByAdditionalProperties = false;
@@ -1327,6 +1367,12 @@
           onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends3 = {}, _extends3[name] = newErrorSchema, _extends3)), id);
         };
       };
+      /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
+       * and calls the `onChange` callback with it
+       *
+       * @param key - The key for which the drop callback is desired
+       * @returns - The drop property click callback
+       */
       _this.onDropPropertyClick = function (key) {
         return function (event) {
           event.preventDefault();
@@ -1338,6 +1384,13 @@
           onChange(copiedFormData);
         };
       };
+      /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
+       * that is already not assigned is found.
+       *
+       * @param preferredKey - The preferred name of a new key
+       * @param [formData] - The form data in which to check if the desired key already exists
+       * @returns - The name of the next available key from `preferredKey`
+       */
       _this.getAvailableKey = function (preferredKey, formData) {
         var _this$props3 = _this.props,
           uiSchema = _this$props3.uiSchema,
@@ -1352,6 +1405,12 @@
         }
         return newKey;
       };
+      /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
+       * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
+       *
+       * @param oldValue - The old value of a field
+       * @returns - The key change callback function
+       */
       _this.onKeyChange = function (oldValue) {
         return function (value, newErrorSchema) {
           var _newKeys, _extends4;
@@ -1377,6 +1436,11 @@
           onChange(renamedObj, errorSchema && errorSchema && _extends({}, errorSchema, (_extends4 = {}, _extends4[value] = newErrorSchema, _extends4)));
         };
       };
+      /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
+       * default data for that field has been added to the formData.
+       *
+       * @param schema - The schema element to which the new property is being added
+       */
       _this.handleAddClick = function (schema) {
         return function () {
           if (!schema.additionalProperties) {
@@ -1419,15 +1483,7 @@
     _proto.isRequired = function isRequired(name) {
       var schema = this.props.schema;
       return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
-    }
-    /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
-     * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
-     * formData.
-     *
-     * @param name - The name of the property
-     * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-     * @returns - The onPropertyChange callback for the `name` property
-     */;
+    };
     /** Returns a default value to be used for a new additional schema property of the given `type`
      *
      * @param type - The type of the new additional schema property
@@ -1450,12 +1506,7 @@
           // We don't have a datatype for some reason (perhaps additionalProperties was true)
           return translateString(utils.TranslatableString.NewStringDefault);
       }
-    }
-    /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
-     * default data for that field has been added to the formData.
-     *
-     * @param schema - The schema element to which the new property is being added
-     */;
+    };
     /** Renders the `ObjectField` from the given props
      */
     _proto.render = function render() {
@@ -1559,6 +1610,7 @@
         required: required,
         idSchema: idSchema,
         uiSchema: uiSchema,
+        errorSchema: errorSchema,
         schema: schema,
         formData: formData,
         formContext: formContext,
@@ -2123,7 +2175,7 @@
     });
   }
 
-  var _excluded$3 = ["id", "name", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "onChangeOverride", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
+  var _excluded$3 = ["id", "name", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "onChangeOverride", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type", "hideLabel", "hideError"];
   /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
    * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
    * It can be customized/overridden for other themes or individual implementations as needed.
@@ -2211,7 +2263,7 @@
       children: jsxRuntime.jsx("button", _extends({
         type: 'submit'
       }, submitButtonProps, {
-        className: "btn btn-info " + submitButtonProps.className,
+        className: "btn btn-info " + (submitButtonProps.className || ''),
         children: submitText
       }))
     });
@@ -3197,6 +3249,7 @@
   function FileWidget(props) {
     var disabled = props.disabled,
       readonly = props.readonly,
+      required = props.required,
       multiple = props.multiple,
       onChange = props.onChange,
       value = props.value,
@@ -3229,6 +3282,7 @@
       children: [jsxRuntime.jsx(BaseInputTemplate, _extends({}, props, {
         disabled: disabled || readonly,
         type: 'file',
+        required: value ? false : required,
         onChangeOverride: handleChange,
         value: '',
         accept: options.accept ? String(options.accept) : undefined
@@ -3286,8 +3340,6 @@
       onFocus = _ref.onFocus,
       onChange = _ref.onChange,
       id = _ref.id;
-    // Generating a unique field name to identify this set of radio buttons
-    var name = Math.random().toString();
     var enumOptions = options.enumOptions,
       enumDisabled = options.enumDisabled,
       inline = options.inline,
@@ -3315,7 +3367,7 @@
             type: 'radio',
             id: utils.optionId(id, i),
             checked: checked,
-            name: name,
+            name: id,
             required: required,
             value: String(i),
             disabled: disabled || itemDisabled || readonly,
@@ -3588,10 +3640,6 @@
   /** The `Form` component renders the outer form and all the fields defined in the `schema` */
   var Form = /*#__PURE__*/function (_Component) {
     _inheritsLoose(Form, _Component);
-    /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
-     * provide any possible type here
-     */
-
     /** 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.
@@ -3601,7 +3649,15 @@
     function Form(props) {
       var _this;
       _this = _Component.call(this, props) || this;
+      /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
+       * provide any possible type here
+       */
       _this.formElement = void 0;
+      /** 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 = function (formData, fields) {
         // For the case of a single input form
         if (fields.length === 0 && typeof formData !== 'object') {
@@ -3616,6 +3672,11 @@
         }
         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 = function (pathSchema, formData) {
         var getAllPaths = function getAllPaths(_obj, acc, paths) {
           if (acc === void 0) {
@@ -3650,6 +3711,17 @@
         };
         return getAllPaths(pathSchema);
       };
+      /** 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
+       * 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 = function (formData, newErrorSchema, id) {
         var _this$props = _this.props,
           extraErrors = _this$props.extraErrors,
@@ -3710,6 +3782,12 @@
           return onChange && onChange(_extends({}, _this.state, state), id);
         });
       };
+      /**
+       * Callback function to handle reset form data.
+       * - Reset all fields with default values.
+       * - Reset validations and errors
+       *
+       */
       _this.reset = function () {
         var onChange = _this.props.onChange;
         var newState = _this.getStateFromProps(_this.props, undefined);
@@ -3725,18 +3803,38 @@
           return onChange && onChange(_extends({}, _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 = function (id, data) {
         var onBlur = _this.props.onBlur;
         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 = function (id, data) {
         var onFocus = _this.props.onFocus;
         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 = function (event) {
         event.preventDefault();
         if (event.target !== event.currentTarget) {
@@ -3929,12 +4027,7 @@
         });
       }
       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
-     */;
+    };
     /** Returns the registry for the form */
     _proto.getRegistry = function getRegistry() {
       var _this$props$templates;
@@ -3998,6 +4091,10 @@
         // if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
         field = this.formElement.current.querySelector("input[id^=" + elementId);
       }
+      if (field.length) {
+        // If we got a list with length > 0
+        field = field[0];
+      }
       if (field) {
         field.focus();
       }
@@ -4048,6 +4145,7 @@
      * needed along with the submit button or any children of the form.
      */;
     _proto.render = function render() {
+      var _UI_OPTIONS_KEY, _submitUiSchema;
       var _this$props7 = this.props,
         children = _this$props7.children,
         id = _this$props7.id,
@@ -4087,6 +4185,17 @@
       // NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
       var as = _internalFormWrapper ? tagName : undefined;
       var FormTag = _internalFormWrapper || tagName || 'form';
+      var _getUiOptions = utils.getUiOptions(uiSchema),
+        _getUiOptions$SUBMIT_ = _getUiOptions[utils.SUBMIT_BTN_OPTIONS_KEY],
+        submitOptions = _getUiOptions$SUBMIT_ === void 0 ? {} : _getUiOptions$SUBMIT_;
+      if (disabled) {
+        submitOptions = _extends({}, submitOptions, {
+          props: _extends({}, submitOptions.props, {
+            disabled: true
+          })
+        });
+      }
+      var submitUiSchema = (_submitUiSchema = {}, _submitUiSchema[utils.UI_OPTIONS_KEY] = (_UI_OPTIONS_KEY = {}, _UI_OPTIONS_KEY[utils.SUBMIT_BTN_OPTIONS_KEY] = submitOptions, _UI_OPTIONS_KEY), _submitUiSchema);
       return jsxRuntime.jsxs(FormTag, {
         className: className ? className : 'rjsf',
         id: id,
@@ -4118,7 +4227,7 @@
           disabled: disabled,
           readonly: readonly
         }), children ? children : jsxRuntime.jsx(SubmitButton, {
-          uiSchema: uiSchema,
+          uiSchema: submitUiSchema,
           registry: registry
         }), showErrorList === 'bottom' && this.renderErrors(registry)]
       });