@bigbinary/neetoui 5.0.9 → 5.0.11

package/README.md

@@ -195,6 +195,8 @@ The `Form` component accepts the following props:
 - `className`: You can use this prop to provide a custom class to the form.
 - `formProps`: Form props object. You can pass `className`, `style` etc. as
   props to the `Form` component.
+- `scrollToErrorField`: To specify whether scroll to error field on clicking
+  submit button is enabled or not. Default value is true.
 
 ---
 

package/formik.cjs.js

@@ -1533,6 +1533,37 @@ function _objectAssign(target) {
 
 var _objectAssign$1 = typeof Object.assign === 'function' ? Object.assign : _objectAssign;
 
+/**
+ * See if an object (i.e. `val`) is an instance of the supplied constructor. This
+ * function will check up the inheritance chain, if any.
+ * If `val` was created using `Object.create`, `R.is(Object, val) === true`.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.3.0
+ * @category Type
+ * @sig (* -> {*}) -> a -> Boolean
+ * @param {Object} ctor A constructor
+ * @param {*} val The value to test
+ * @return {Boolean}
+ * @example
+ *
+ *      R.is(Object, {}); //=> true
+ *      R.is(Number, 1); //=> true
+ *      R.is(Object, 1); //=> false
+ *      R.is(String, 's'); //=> true
+ *      R.is(String, new String('')); //=> true
+ *      R.is(Object, new String('')); //=> true
+ *      R.is(Object, 's'); //=> false
+ *      R.is(Number, {}); //=> false
+ */
+
+var is =
+/*#__PURE__*/
+_curry2(function is(Ctor, val) {
+  return val instanceof Ctor || val != null && (val.constructor === Ctor || Ctor.name === 'Object' && typeof val === 'object');
+});
+
 /**
  * Returns `true` if the given value is its type's empty value; `false`
  * otherwise.
@@ -14062,7 +14093,7 @@ var FormikButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     values = _useFormikContext.values,
     initialValues = _useFormikContext.initialValues,
     isValid = _useFormikContext.isValid;
-  var isDisabled = disabled !== null && disabled !== void 0 ? disabled : isSubmitting || !isValid || equals(values, initialValues);
+  var isDisabled = disabled !== null && disabled !== void 0 ? disabled : isSubmitting || equals(values, initialValues);
   return /*#__PURE__*/React__default["default"].createElement(Button, _extends$2({
     disabled: isDisabled,
     loading: isSubmitting && isValid,
@@ -17504,8 +17535,9 @@ var BlockNavigation = function BlockNavigation(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(Alert, {
     isOpen: isBlocked,
-    message: "Are you sure you want to continue? All of your unsaved changes will be lost.",
-    title: "You have unsaved changes!",
+    message: "All of your unsaved changes will be lost. This can't be undone.",
+    submitButtonLabel: "Discard changes",
+    title: "You have unsaved changes",
     onClose: hidePrompt,
     onSubmit: continueAction
   });
@@ -18119,12 +18151,76 @@ try {
   }
 }
 
+function _arrayWithoutHoles$1(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+}
+
+function _iterableToArray$1(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _nonIterableSpread$1() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray$1(arr) {
+  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1();
+}
+
+var transformObjectToDotNotation = function transformObjectToDotNotation(object) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  var result = [];
+  Object.entries(object).forEach(function (_ref) {
+    var _ref2 = _slicedToArray$1(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    if (value) {
+      var nextKey = prefix ? "".concat(prefix, ".").concat(key) : key;
+      if (is(Object, value)) {
+        result.push.apply(result, _toConsumableArray$1(transformObjectToDotNotation(value, nextKey)));
+      } else {
+        result.push(nextKey);
+      }
+    }
+  });
+  return result;
+};
+var getErrorFieldName = function getErrorFieldName(formikErrors) {
+  var _transformObjectToDot;
+  return (_transformObjectToDot = transformObjectToDotNotation(formikErrors)) === null || _transformObjectToDot === void 0 ? void 0 : _transformObjectToDot[0];
+};
+
+var ScrollToErrorField = function ScrollToErrorField(_ref) {
+  var formRef = _ref.formRef;
+  var _useFormikContext = formik.useFormikContext(),
+    submitCount = _useFormikContext.submitCount,
+    isValid = _useFormikContext.isValid,
+    errors = _useFormikContext.errors;
+  var isValidatedReference = React.useRef(false);
+  React.useEffect(function () {
+    isValidatedReference.current = false;
+  }, [submitCount]);
+  React.useEffect(function () {
+    if (!formRef.current || isValidatedReference.current || isValid) return;
+    isValidatedReference.current = true;
+    var fieldErrorName = getErrorFieldName(errors);
+    if (!fieldErrorName) return;
+    var errorFormElement = formRef.current.querySelector("[name=".concat(fieldErrorName, "]"));
+    errorFormElement === null || errorFormElement === void 0 ? void 0 : errorFormElement.scrollIntoView({
+      behavior: "smooth",
+      block: "center"
+    });
+  }, [submitCount, errors]);
+  return null;
+};
+
 var _excluded$j = ["values", "validateForm", "setErrors", "setTouched"];
 var FormWrapper = /*#__PURE__*/React.forwardRef(function (_ref, formRef) {
   var className = _ref.className,
     formProps = _ref.formProps,
     children = _ref.children,
-    onSubmit = _ref.onSubmit;
+    onSubmit = _ref.onSubmit,
+    scrollToErrorField = _ref.scrollToErrorField;
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     validateForm = _useFormikContext.validateForm,
@@ -18133,6 +18229,7 @@ var FormWrapper = /*#__PURE__*/React.forwardRef(function (_ref, formRef) {
     formikBag = _objectWithoutProperties$1(_useFormikContext, _excluded$j);
   var isFormDirty = formikBag.dirty,
     isSubmitting = formikBag.isSubmitting;
+  var formRefForScrollToErrorFiled = React.useRef();
   var handleKeyDown = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(event) {
       var isEventFromEditorOrTextarea, errors;
@@ -18197,9 +18294,11 @@ var FormWrapper = /*#__PURE__*/React.forwardRef(function (_ref, formRef) {
     noValidate: true,
     className: className,
     "data-testid": "neeto-ui-form-wrapper",
-    ref: formRef,
+    ref: formRef || formRefForScrollToErrorFiled,
     onKeyDown: handleKeyDown
-  }, formProps), children);
+  }, formProps), scrollToErrorField && /*#__PURE__*/React__default["default"].createElement(ScrollToErrorField, {
+    formRef: formRef || formRefForScrollToErrorFiled
+  }), children);
 });
 FormWrapper.displayName = "FormWrapper";
 
@@ -18207,12 +18306,15 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
     formikProps = _ref.formikProps,
-    formProps = _ref.formProps;
+    formProps = _ref.formProps,
+    _ref$scrollToErrorFie = _ref.scrollToErrorField,
+    scrollToErrorField = _ref$scrollToErrorFie === void 0 ? true : _ref$scrollToErrorFie;
   return /*#__PURE__*/React__default["default"].createElement(formik.Formik, formikProps, function (props) {
     return /*#__PURE__*/React__default["default"].createElement(FormWrapper, {
       className: className,
       formProps: formProps,
       ref: ref,
+      scrollToErrorField: scrollToErrorField,
       onSubmit: formikProps === null || formikProps === void 0 ? void 0 : formikProps.onSubmit
     }, typeof children === "function" ? children(props) : children);
   });
@@ -18238,7 +18340,11 @@ Form.propTypes = {
    * Refer to the Formik docs for more details
    * https://formik.org/docs/api/form
    **/
-  formProps: propTypes.exports.object
+  formProps: propTypes.exports.object,
+  /**
+   * Props to be passed for scrolling to error field on submit button click.
+   **/
+  scrollToErrorField: propTypes.exports.bool
 };
 
 var _excluded$i = ["size", "type", "label", "error", "suffix", "prefix", "disabled", "helpText", "className", "nakedInput", "contentSize", "required", "maxLength", "unlimitedChars", "labelProps"];
@@ -18373,22 +18479,6 @@ FormikInput.propTypes = {
   name: propTypes.exports.string
 };
 
-function _arrayWithoutHoles$1(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
-function _iterableToArray$1(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread$1() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray$1(arr) {
-  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1();
-}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {