@rjsf/core 5.4.0 → 5.5.1

package/dist/core.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Component, useState, useCallback, useEffect, useReducer, useMemo, createRef, forwardRef } from 'react';
-import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, TranslatableString, isCustomWidget, getWidget, optionsList, deepEquals, ERRORS_KEY, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, ONE_OF_KEY, mergeObjects, UI_OPTIONS_KEY, descriptionId, getSchemaType, ID_KEY, hasWidget, titleId, getInputProps, examplesId, ariaDescribedByIds, getSubmitButtonOptions, errorId, helpId, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, labelValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, utcToLocal, localToUTC, dataURItoBlob, enumOptionsIndexForValue, englishStringTranslator, createSchemaUtils, shouldRender, UI_GLOBAL_OPTIONS_KEY, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
+import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, TranslatableString, isCustomWidget, getWidget, optionsList, deepEquals, ERRORS_KEY, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, ONE_OF_KEY, mergeObjects, UI_OPTIONS_KEY, descriptionId, getSchemaType, ID_KEY, hasWidget, titleId, getInputProps, examplesId, ariaDescribedByIds, getSubmitButtonOptions, errorId, helpId, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, labelValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, utcToLocal, localToUTC, dataURItoBlob, enumOptionsIndexForValue, englishStringTranslator, createSchemaUtils, shouldRender, UI_GLOBAL_OPTIONS_KEY, SUBMIT_BTN_OPTIONS_KEY, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
 import get from 'lodash-es/get';
 import isEmpty from 'lodash-es/isEmpty';
 import _pick from 'lodash-es/pick';
@@ -129,6 +129,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   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,
@@ -141,14 +144,32 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       // 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) {
@@ -174,6 +195,12 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         });
       };
     };
+    /** 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) {
@@ -207,6 +234,13 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         });
       };
     };
+    /** 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) {
@@ -247,6 +281,11 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         });
       };
     };
+    /** 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;
@@ -264,6 +303,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         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,
@@ -347,10 +387,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       }
     }
     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
@@ -380,13 +417,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     }, 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() {
@@ -1007,6 +1038,12 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
   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,
@@ -1102,13 +1139,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     // 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,
@@ -1295,10 +1326,19 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       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;
@@ -1323,6 +1363,12 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         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();
@@ -1334,6 +1380,13 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         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,
@@ -1348,6 +1401,12 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       }
       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;
@@ -1373,6 +1432,11 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         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) {
@@ -1415,15 +1479,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
   _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
@@ -1446,12 +1502,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         // We don't have a datatype for some reason (perhaps additionalProperties was true)
         return translateString(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() {
@@ -1555,6 +1606,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       required: required,
       idSchema: idSchema,
       uiSchema: uiSchema,
+      errorSchema: errorSchema,
       schema: schema,
       formData: formData,
       formContext: formContext,
@@ -2119,7 +2171,7 @@ function ArrayFieldTitleTemplate(props) {
   });
 }
 
-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.
@@ -2207,7 +2259,7 @@ function SubmitButton(_ref) {
     children: jsx("button", _extends({
       type: 'submit'
     }, submitButtonProps, {
-      className: "btn btn-info " + submitButtonProps.className,
+      className: "btn btn-info " + (submitButtonProps.className || ''),
       children: submitText
     }))
   });
@@ -3193,6 +3245,7 @@ function extractFileInfo(dataURLs) {
 function FileWidget(props) {
   var disabled = props.disabled,
     readonly = props.readonly,
+    required = props.required,
     multiple = props.multiple,
     onChange = props.onChange,
     value = props.value,
@@ -3225,6 +3278,7 @@ function FileWidget(props) {
     children: [jsx(BaseInputTemplate, _extends({}, props, {
       disabled: disabled || readonly,
       type: 'file',
+      required: value ? false : required,
       onChangeOverride: handleChange,
       value: '',
       accept: options.accept ? String(options.accept) : undefined
@@ -3282,8 +3336,6 @@ function RadioWidget(_ref) {
     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,
@@ -3311,7 +3363,7 @@ function RadioWidget(_ref) {
           type: 'radio',
           id: optionId(id, i),
           checked: checked,
-          name: name,
+          name: id,
           required: required,
           value: String(i),
           disabled: disabled || itemDisabled || readonly,
@@ -3584,10 +3636,6 @@ function getDefaultRegistry() {
 /** 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.
@@ -3597,7 +3645,15 @@ var Form = /*#__PURE__*/function (_Component) {
   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') {
@@ -3612,6 +3668,11 @@ var Form = /*#__PURE__*/function (_Component) {
       }
       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) {
@@ -3646,6 +3707,17 @@ var Form = /*#__PURE__*/function (_Component) {
       };
       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,
@@ -3706,6 +3778,12 @@ var Form = /*#__PURE__*/function (_Component) {
         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);
@@ -3721,18 +3799,38 @@ var Form = /*#__PURE__*/function (_Component) {
         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) {
@@ -3925,12 +4023,7 @@ var Form = /*#__PURE__*/function (_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
-   */;
+  };
   /** Returns the registry for the form */
   _proto.getRegistry = function getRegistry() {
     var _this$props$templates;
@@ -3994,6 +4087,10 @@ var Form = /*#__PURE__*/function (_Component) {
       // 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();
     }
@@ -4044,6 +4141,7 @@ var Form = /*#__PURE__*/function (_Component) {
    * 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,
@@ -4083,6 +4181,17 @@ var Form = /*#__PURE__*/function (_Component) {
     // 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 = getUiOptions(uiSchema),
+      _getUiOptions$SUBMIT_ = _getUiOptions[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[UI_OPTIONS_KEY] = (_UI_OPTIONS_KEY = {}, _UI_OPTIONS_KEY[SUBMIT_BTN_OPTIONS_KEY] = submitOptions, _UI_OPTIONS_KEY), _submitUiSchema);
     return jsxs(FormTag, {
       className: className ? className : 'rjsf',
       id: id,
@@ -4114,7 +4223,7 @@ var Form = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         readonly: readonly
       }), children ? children : jsx(SubmitButton, {
-        uiSchema: uiSchema,
+        uiSchema: submitUiSchema,
         registry: registry
       }), showErrorList === 'bottom' && this.renderErrors(registry)]
     });