@bigbinary/neetoui 5.0.9 → 5.0.11

package/formik.d.ts

@@ -24,8 +24,9 @@ export interface BlockNavigationProps {
 export interface Form {
   className?: string;
   children: React.ReactNode | ((props: FormikProps<any>) => React.ReactNode);
-  formikProps: {[key: string]: any};
-  formProps?: {[key: string]: any};
+  formikProps: { [key: string]: any };
+  formProps?: { [key: string]: any };
+  scrollToErrorField?: boolean;
 }
 
 export const ActionBlock: React.FC<ActionBlockProps>;

package/formik.js

@@ -1506,6 +1506,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.
@@ -14035,7 +14066,7 @@ var FormikButton = /*#__PURE__*/forwardRef$1(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.createElement(Button, _extends$2({
     disabled: isDisabled,
     loading: isSubmitting && isValid,
@@ -17477,8 +17508,9 @@ var BlockNavigation = function BlockNavigation(_ref) {
   };
   return /*#__PURE__*/React__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
   });
@@ -18092,12 +18124,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 = useFormikContext(),
+    submitCount = _useFormikContext.submitCount,
+    isValid = _useFormikContext.isValid,
+    errors = _useFormikContext.errors;
+  var isValidatedReference = useRef(false);
+  useEffect(function () {
+    isValidatedReference.current = false;
+  }, [submitCount]);
+  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__*/forwardRef$1(function (_ref, formRef) {
   var className = _ref.className,
     formProps = _ref.formProps,
     children = _ref.children,
-    onSubmit = _ref.onSubmit;
+    onSubmit = _ref.onSubmit,
+    scrollToErrorField = _ref.scrollToErrorField;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
     validateForm = _useFormikContext.validateForm,
@@ -18106,6 +18202,7 @@ var FormWrapper = /*#__PURE__*/forwardRef$1(function (_ref, formRef) {
     formikBag = _objectWithoutProperties$1(_useFormikContext, _excluded$j);
   var isFormDirty = formikBag.dirty,
     isSubmitting = formikBag.isSubmitting;
+  var formRefForScrollToErrorFiled = useRef();
   var handleKeyDown = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(event) {
       var isEventFromEditorOrTextarea, errors;
@@ -18170,9 +18267,11 @@ var FormWrapper = /*#__PURE__*/forwardRef$1(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.createElement(ScrollToErrorField, {
+    formRef: formRef || formRefForScrollToErrorFiled
+  }), children);
 });
 FormWrapper.displayName = "FormWrapper";
 
@@ -18180,12 +18279,15 @@ var Form = /*#__PURE__*/forwardRef$1(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.createElement(Formik, formikProps, function (props) {
     return /*#__PURE__*/React__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);
   });
@@ -18211,7 +18313,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"];
@@ -18346,22 +18452,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++) {