@rjsf/core 5.0.2 → 5.1.0

package/dist/core.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/omit'), require('lodash-es/has'), require('lodash-es/unset')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/omit', 'lodash-es/has', 'lodash-es/unset'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.React, global.utils, global.get, global.isEmpty, global._pick, global.isObject, global.set, global.nanoid, global.omit, global.has, global.unset));
-})(this, (function (exports, React, utils, get, isEmpty, _pick, isObject, set, nanoid, omit, has, unset) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/toPath'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/omit'), require('lodash-es/has'), require('lodash-es/unset')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/toPath', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/omit', 'lodash-es/has', 'lodash-es/unset'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.React, global.utils, global.get, global.isEmpty, global._pick, global._toPath, global.isObject, global.set, global.nanoid, global.omit, global.has, global.unset));
+})(this, (function (exports, React, utils, get, isEmpty, _pick, _toPath, isObject, set, nanoid, omit, has, unset) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10,6 +10,7 @@
   var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
   var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
   var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
+  var _toPath__default = /*#__PURE__*/_interopDefaultLegacy(_toPath);
   var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
   var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
   var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
@@ -2633,6 +2634,7 @@
       className: "list-inline"
     }, dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
       return /*#__PURE__*/React__default["default"].createElement("li", {
+        className: "list-inline-item",
         key: i
       }, /*#__PURE__*/React__default["default"].createElement(DateElement, _extends({
         rootId: id,
@@ -2645,11 +2647,15 @@
         onFocus: onFocus,
         autofocus: autofocus && i === 0
       })));
-    }), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement("a", {
+    }), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "list-inline-item"
+    }, /*#__PURE__*/React__default["default"].createElement("a", {
       href: "#",
       className: "btn btn-info btn-now",
       onClick: handleSetNow
-    }, "Now")), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement("a", {
+    }, "Now")), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "list-inline-item"
+    }, /*#__PURE__*/React__default["default"].createElement("a", {
       href: "#",
       className: "btn btn-warning btn-clear",
       onClick: handleClear
@@ -3522,7 +3528,7 @@
       if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema)) {
         schemaUtils = utils.createSchemaUtils(props.validator, rootSchema);
       }
-      var formData = schemaUtils.getDefaultFormState(schema, inputFormData, "excludeObjectChildren");
+      var formData = schemaUtils.getDefaultFormState(schema, inputFormData);
       var retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
       var getCurrentErrors = function getCurrentErrors() {
         if (props.noValidate) {
@@ -3662,15 +3668,47 @@
         this.formElement.current.requestSubmit();
       }
     }
+    /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
+     * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
+     * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
+     *
+     * @param error - The error on which to focus
+     */;
+    _proto.focusOnError = function focusOnError(error) {
+      var _this$props4 = this.props,
+        _this$props4$idPrefix = _this$props4.idPrefix,
+        idPrefix = _this$props4$idPrefix === void 0 ? "root" : _this$props4$idPrefix,
+        _this$props4$idSepara = _this$props4.idSeparator,
+        idSeparator = _this$props4$idSepara === void 0 ? "_" : _this$props4$idSepara;
+      var property = error.property;
+      var path = _toPath__default["default"](property);
+      if (path[0] === "") {
+        // Most of the time the `.foo` property results in the first element being empty, so replace it with the idPrefix
+        path[0] = idPrefix;
+      } else {
+        // Otherwise insert the idPrefix into the first location using unshift
+        path.unshift(idPrefix);
+      }
+      var elementId = path.join(idSeparator);
+      var field = this.formElement.current.elements[elementId];
+      if (!field) {
+        // 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) {
+        field.focus();
+      }
+    }
     /** Programmatically validate the form. 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.
      */;
     _proto.validateForm = function validateForm() {
-      var _this$props4 = this.props,
-        extraErrors = _this$props4.extraErrors,
-        onError = _this$props4.onError;
+      var _this$props5 = this.props,
+        extraErrors = _this$props5.extraErrors,
+        focusOnFirstError = _this$props5.focusOnFirstError,
+        onError = _this$props5.onError;
       var formData = this.state.formData;
       var schemaUtils = this.state.schemaUtils;
       var schemaValidation = this.validate(formData);
@@ -3684,6 +3722,9 @@
           errorSchema = merged.errorSchema;
           errors = merged.errors;
         }
+        if (focusOnFirstError) {
+          this.focusOnError(schemaValidation.errors[0]);
+        }
         this.setState({
           errors: errors,
           errorSchema: errorSchema,
@@ -3704,31 +3745,31 @@
      * needed along with the submit button or any children of the form.
      */;
     _proto.render = function render() {
-      var _this$props5 = this.props,
-        children = _this$props5.children,
-        id = _this$props5.id,
-        idPrefix = _this$props5.idPrefix,
-        idSeparator = _this$props5.idSeparator,
-        _this$props5$classNam = _this$props5.className,
-        className = _this$props5$classNam === void 0 ? "" : _this$props5$classNam,
-        tagName = _this$props5.tagName,
-        name = _this$props5.name,
-        method = _this$props5.method,
-        target = _this$props5.target,
-        action = _this$props5.action,
-        autoComplete = _this$props5.autoComplete,
-        enctype = _this$props5.enctype,
-        acceptcharset = _this$props5.acceptcharset,
-        _this$props5$noHtml5V = _this$props5.noHtml5Validate,
-        noHtml5Validate = _this$props5$noHtml5V === void 0 ? false : _this$props5$noHtml5V,
-        _this$props5$disabled = _this$props5.disabled,
-        disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
-        _this$props5$readonly = _this$props5.readonly,
-        readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
-        formContext = _this$props5.formContext,
-        _this$props5$showErro = _this$props5.showErrorList,
-        showErrorList = _this$props5$showErro === void 0 ? "top" : _this$props5$showErro,
-        _internalFormWrapper = _this$props5._internalFormWrapper;
+      var _this$props6 = this.props,
+        children = _this$props6.children,
+        id = _this$props6.id,
+        idPrefix = _this$props6.idPrefix,
+        idSeparator = _this$props6.idSeparator,
+        _this$props6$classNam = _this$props6.className,
+        className = _this$props6$classNam === void 0 ? "" : _this$props6$classNam,
+        tagName = _this$props6.tagName,
+        name = _this$props6.name,
+        method = _this$props6.method,
+        target = _this$props6.target,
+        action = _this$props6.action,
+        autoComplete = _this$props6.autoComplete,
+        enctype = _this$props6.enctype,
+        acceptcharset = _this$props6.acceptcharset,
+        _this$props6$noHtml5V = _this$props6.noHtml5Validate,
+        noHtml5Validate = _this$props6$noHtml5V === void 0 ? false : _this$props6$noHtml5V,
+        _this$props6$disabled = _this$props6.disabled,
+        disabled = _this$props6$disabled === void 0 ? false : _this$props6$disabled,
+        _this$props6$readonly = _this$props6.readonly,
+        readonly = _this$props6$readonly === void 0 ? false : _this$props6$readonly,
+        formContext = _this$props6.formContext,
+        _this$props6$showErro = _this$props6.showErrorList,
+        showErrorList = _this$props6$showErro === void 0 ? "top" : _this$props6$showErro,
+        _internalFormWrapper = _this$props6._internalFormWrapper;
       var _this$state4 = this.state,
         schema = _this$state4.schema,
         uiSchema = _this$state4.uiSchema,