@dnb/eufemia 10.46.0 → 10.48.0

package/cjs/extensions/forms/hooks/useFieldProps.js

@@ -16,8 +16,6 @@ var _FieldPropsContext = _interopRequireDefault(require("../Form/FieldProps/Fiel
 var _componentHelper = require("../../../shared/component-helper");
 var _useId = _interopRequireDefault(require("../../../shared/helpers/useId"));
 var _useUpdateEffect = _interopRequireDefault(require("../../../shared/helpers/useUpdateEffect"));
-var _useMountEffect = _interopRequireDefault(require("../../../shared/helpers/useMountEffect"));
-var _useUnmountEffect = _interopRequireDefault(require("../../../shared/helpers/useUnmountEffect"));
 var _FieldBlockContext = _interopRequireDefault(require("../FieldBlock/FieldBlockContext"));
 var _IterateItemContext = _interopRequireDefault(require("../Iterate/IterateItemContext"));
 var _SectionContext = _interopRequireDefault(require("../Form/Section/SectionContext"));
@@ -28,6 +26,7 @@ var _useSharedState = require("../../../shared/helpers/useSharedState");
 var _isAsync = require("../../../shared/helpers/isAsync");
 var _useTranslation = _interopRequireDefault(require("./useTranslation"));
 var _useExternalValue2 = _interopRequireDefault(require("./useExternalValue"));
+var _useDataValue = _interopRequireDefault(require("./useDataValue"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -41,6 +40,7 @@ function useFieldProps(localeProps) {
     _localErrorRef$curren,
     _ref3,
     _this = this,
+    _dataContext$props3,
     _props$path,
     _props$autoComplete;
   let {
@@ -67,6 +67,7 @@ function useFieldProps(localeProps) {
     onChange,
     onBlurValidator,
     validator,
+    exportValidators,
     schema,
     validateInitially,
     validateUnchanged,
@@ -89,7 +90,11 @@ function useFieldProps(localeProps) {
       return res;
     }
   } = props;
-  const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
+  const [salt, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
+  const isInternalRerenderRef = (0, _react.useRef)(undefined);
+  (0, _react.useMemo)(() => {
+    isInternalRerenderRef.current = salt;
+  }, [salt]);
   const {
     startProcess
   } = (0, _useProcessManager.default)();
@@ -120,10 +125,13 @@ function useFieldProps(localeProps) {
     setFieldError: setFieldErrorDataContext,
     setFieldProps: setPropsDataContext,
     setHasVisibleError: setHasVisibleErrorDataContext,
+    handleMountField,
+    handleUnMountField,
+    setFieldEventListener,
     errors: dataContextErrors,
     showAllErrors,
     contextErrorMessages
-  } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
+  } = dataContext || {};
   const onChangeContext = dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props = dataContext.props) === null || _dataContext$props === void 0 ? void 0 : _dataContext$props.onChange;
   const disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : props.readOnly;
   const inFieldBlock = Boolean(fieldBlockContext);
@@ -131,18 +139,18 @@ function useFieldProps(localeProps) {
     setFieldState: setFieldStateFieldBlock,
     showFieldError: showFieldErrorFieldBlock,
     mountedFieldsRef: mountedFieldsRefFieldBlock
-  } = fieldBlockContext !== null && fieldBlockContext !== void 0 ? fieldBlockContext : {};
+  } = fieldBlockContext || {};
   const {
     handleChange: handleChangeIterateContext
-  } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
+  } = iterateItemContext || {};
   const {
     path: sectionPath,
     errorPrioritization
-  } = sectionContext !== null && sectionContext !== void 0 ? sectionContext : {};
+  } = sectionContext || {};
   const {
     setFieldError,
     showBoundaryErrors
-  } = fieldBoundaryContext !== null && fieldBoundaryContext !== void 0 ? fieldBoundaryContext : {};
+  } = fieldBoundaryContext || {};
   const hasPath = Boolean(pathProp);
   const {
     path,
@@ -162,10 +170,10 @@ function useFieldProps(localeProps) {
     emptyValue
   })) !== null && _useExternalValue !== void 0 ? _useExternalValue : defaultValueRef.current;
   const valueRef = (0, _react.useRef)(externalValue);
-  const changedRef = (0, _react.useRef)(false);
-  const hasFocusRef = (0, _react.useRef)(false);
+  const changedRef = (0, _react.useRef)();
+  const hasFocusRef = (0, _react.useRef)();
   const required = (0, _react.useMemo)(() => {
-    if (requiredProp) {
+    if (typeof requiredProp !== 'undefined') {
       return requiredProp;
     }
     const paths = identifier.split('/');
@@ -185,8 +193,8 @@ function useFieldProps(localeProps) {
         return true;
       }
     }
-  }, [sectionPath, dataContext.schema, identifier, requiredProp, schema]);
-  const revealErrorRef = (0, _react.useRef)(Boolean(validateInitially || errorProp));
+  }, [requiredProp, identifier, schema, dataContext.schema, sectionPath]);
+  const revealErrorRef = (0, _react.useRef)(validateInitially !== null && validateInitially !== void 0 ? validateInitially : Boolean(errorProp));
   const errorMethodRef = (0, _react.useRef)({});
   const localErrorRef = (0, _react.useRef)();
   const hasLocalErrorRef = (0, _react.useRef)(false);
@@ -194,9 +202,9 @@ function useFieldProps(localeProps) {
     return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
   }, [dataContextErrors, identifier, path]);
   const contextErrorRef = (0, _react.useRef)(dataContextError);
-  const validatorRef = (0, _react.useRef)(validator);
+  const onChangeValidatorRef = (0, _react.useRef)(validator);
   (0, _useUpdateEffect.default)(() => {
-    validatorRef.current = validator;
+    onChangeValidatorRef.current = validator;
   }, [validator]);
   const onBlurValidatorRef = (0, _react.useRef)(onBlurValidator);
   (0, _useUpdateEffect.default)(() => {
@@ -276,22 +284,25 @@ function useFieldProps(localeProps) {
     }
   }, [setFieldStateDataContext, identifier, validateInitially]);
   const revealError = (0, _react.useCallback)(() => {
-    revealErrorRef.current = true;
-    showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, true);
-    if (localErrorRef.current) {
-      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, true);
-    } else {
-      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, false);
+    if (revealErrorRef.current === false && validateInitially === false) {
+      revealErrorRef.current = undefined;
+      return;
+    }
+    if (!revealErrorRef.current) {
+      revealErrorRef.current = true;
+      showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, true);
+      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, !!localErrorRef.current);
     }
-  }, [showFieldErrorFieldBlock, identifier, setHasVisibleErrorDataContext]);
+  }, [identifier, setHasVisibleErrorDataContext, showFieldErrorFieldBlock, validateInitially]);
   const hideError = (0, _react.useCallback)(() => {
-    revealErrorRef.current = false;
-    showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
-    setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, false);
-  }, [setHasVisibleErrorDataContext, identifier, showFieldErrorFieldBlock]);
+    if (revealErrorRef.current) {
+      revealErrorRef.current = undefined;
+      showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
+      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, false);
+    }
+  }, [identifier, setHasVisibleErrorDataContext, showFieldErrorFieldBlock]);
   const prepareError = (0, _react.useCallback)(error => {
     if (error instanceof _types.FormError) {
-      var _error$messageValues;
       let message = error.message;
       const {
         validationRule
@@ -303,11 +314,11 @@ function useFieldProps(localeProps) {
           message = fieldMessage;
         }
       }
-      const messagehasValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref2) => {
+      const messageHasValues = Object.entries(error.messageValues || {}).reduce((message, _ref2) => {
         let [key, value] = _ref2;
         return message.replace(`{${key}}`, value);
       }, message);
-      error.message = messagehasValues;
+      error.message = messageHasValues;
       return error;
     }
     return error;
@@ -327,6 +338,75 @@ function useFieldProps(localeProps) {
     var _ref4;
     return Boolean((_ref4 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref4 !== void 0 ? _ref4 : contextErrorRef.current);
   }, [errorProp]);
+  const connectWithPathListenerRef = (0, _react.useRef)(async () => {
+    if (localErrorRef.current || validateUnchanged || continuousValidation) {
+      if (onChangeValidatorRef.current) {
+        runOnChangeValidator();
+      }
+    }
+    if (localErrorRef.current && onBlurValidatorRef.current) {
+      runOnBlurValidator();
+    }
+  });
+  const {
+    getValueByPath
+  } = (0, _useDataValue.default)();
+  const exportValidatorsRef = (0, _react.useRef)(exportValidators);
+  exportValidatorsRef.current = exportValidators;
+  const additionalArgs = (0, _react.useMemo)(() => {
+    const errorMessages = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
+    const args = _objectSpread(_objectSpread({}, errorMessages), {}, {
+      errorMessages,
+      validators: exportValidatorsRef.current,
+      connectWithPath: path => {
+        setFieldEventListener === null || setFieldEventListener === void 0 ? void 0 : setFieldEventListener(path, 'onPathChange', connectWithPathListenerRef.current);
+        return {
+          getValue: () => getValueByPath(path)
+        };
+      }
+    });
+    return args;
+  }, [contextErrorMessages, getValueByPath, setFieldEventListener]);
+  const extendWithExportedValidators = (0, _react.useCallback)((validator, result) => {
+    if (exportValidatorsRef.current && !result && (validator === onChangeValidatorRef.current || validator === onBlurValidatorRef.current) && !Array.isArray(result)) {
+      return Object.values(exportValidatorsRef.current);
+    }
+    return result;
+  }, []);
+  const callValidatorFnSync = (0, _react.useCallback)(function (validator) {
+    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : valueRef.current;
+    if (typeof validator !== 'function') {
+      return undefined;
+    }
+    const result = extendWithExportedValidators(validator, validator(value, additionalArgs));
+    if (Array.isArray(result)) {
+      for (const validator of result) {
+        const result = callValidatorFnSync(validator, value);
+        if (result instanceof Error) {
+          return result;
+        }
+      }
+      return;
+    }
+    return result;
+  }, [additionalArgs, extendWithExportedValidators]);
+  const callValidatorFnAsync = (0, _react.useCallback)(async function (validator) {
+    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : valueRef.current;
+    if (typeof validator !== 'function') {
+      return undefined;
+    }
+    const result = extendWithExportedValidators(validator, await validator(value, additionalArgs));
+    if (Array.isArray(result)) {
+      for (const validator of result) {
+        const result = await callValidatorFnAsync(validator, value);
+        if (result instanceof Error) {
+          return result;
+        }
+      }
+      return;
+    }
+    return result;
+  }, [additionalArgs, extendWithExportedValidators]);
   const stateId = (0, _useId.default)();
   const persistErrorState = (0, _react.useCallback)(function (method) {
     let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
@@ -359,23 +439,19 @@ function useFieldProps(localeProps) {
     persistErrorState('wipe');
     hasLocalErrorRef.current = false;
   }, [persistErrorState]);
-  const callValidator = (0, _react.useCallback)(async () => {
-    if (typeof validatorRef.current !== 'function') {
-      return;
-    }
-    const runAsync = (0, _isAsync.isAsync)(validatorRef.current);
-    if (runAsync) {
-      defineAsyncProcess('validator');
-      setFieldState('validating');
-      hideError();
-    }
-    const opts = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
-    const tmpValue = valueRef.current;
-    const result = await validatorRef.current(valueRef.current, opts);
-    const unchangedValue = tmpValue === valueRef.current;
+  const validatorCacheRef = (0, _react.useRef)({
+    onChangeValidator: null,
+    onBlurValidator: null
+  });
+  const revealOnChangeValidatorResult = (0, _react.useCallback)(_ref5 => {
+    let {
+      result,
+      unchangedValue
+    } = _ref5;
+    const runAsync = (0, _isAsync.isAsync)(onChangeValidatorRef.current);
     if (unchangedValue) {
       persistErrorState('gracefully', result);
-      if (continuousValidation || runAsync) {
+      if (validateInitially && !changedRef.current || validateUnchanged || continuousValidation || runAsync) {
         window.requestAnimationFrame(() => {
           revealError();
           forceUpdate();
@@ -390,30 +466,132 @@ function useFieldProps(localeProps) {
         setFieldState('pending');
       }
     }
-    return result;
-  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, revealError]);
+  }, [continuousValidation, defineAsyncProcess, persistErrorState, revealError, setFieldState, validateInitially, validateUnchanged]);
+  const callOnChangeValidator = (0, _react.useCallback)(async () => {
+    if (typeof onChangeValidatorRef.current !== 'function') {
+      return {};
+    }
+    const tmpValue = valueRef.current;
+    let result = (0, _isAsync.isAsync)(onChangeValidatorRef.current) ? await callValidatorFnAsync(onChangeValidatorRef.current) : callValidatorFnSync(onChangeValidatorRef.current);
+    if (result instanceof Promise) {
+      result = await result;
+    }
+    const unchangedValue = tmpValue === valueRef.current;
+    return {
+      result,
+      unchangedValue
+    };
+  }, [callValidatorFnAsync, callValidatorFnSync]);
+  const startOnChangeValidatorValidation = (0, _react.useCallback)(async () => {
+    if (typeof onChangeValidatorRef.current !== 'function') {
+      return;
+    }
+    if ((0, _isAsync.isAsync)(onChangeValidatorRef.current)) {
+      defineAsyncProcess('validator');
+      setFieldState('validating');
+      hideError();
+    }
+    const tmpValue = valueRef.current;
+    let result = (0, _isAsync.isAsync)(onChangeValidatorRef.current) ? await callValidatorFnAsync(onChangeValidatorRef.current) : callValidatorFnSync(onChangeValidatorRef.current);
+    if (result instanceof Promise) {
+      result = await result;
+    }
+    const unchangedValue = tmpValue === valueRef.current;
+    revealOnChangeValidatorResult({
+      result,
+      unchangedValue
+    });
+    return {
+      result
+    };
+  }, [callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, hideError, revealOnChangeValidatorResult, setFieldState]);
+  const runOnChangeValidator = (0, _react.useCallback)(async () => {
+    if (!onChangeValidatorRef.current) {
+      return;
+    }
+    const {
+      result,
+      unchangedValue
+    } = await callOnChangeValidator();
+    if (String(result) !== String(validatorCacheRef.current.onChangeValidator)) {
+      if (result) {
+        revealOnChangeValidatorResult({
+          result,
+          unchangedValue
+        });
+      } else {
+        hideError();
+        clearErrorState();
+      }
+    }
+    validatorCacheRef.current.onChangeValidator = result || null;
+  }, [callOnChangeValidator, clearErrorState, hideError, revealOnChangeValidatorResult]);
   const callOnBlurValidator = (0, _react.useCallback)(async function () {
     let {
-      valueOverride = null
+      overrideValue = null
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     if (typeof onBlurValidatorRef.current !== 'function') {
-      return;
+      return {};
     }
-    const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onBlurValidator');
-    const runAsync = (0, _isAsync.isAsync)(onBlurValidatorRef.current);
-    if (runAsync) {
-      defineAsyncProcess('onBlurValidator');
-      setFieldState('validating');
+    const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, 'onBlurValidator');
+    let result = (0, _isAsync.isAsync)(onBlurValidatorRef.current) ? await callValidatorFnAsync(onBlurValidatorRef.current, value) : callValidatorFnSync(onBlurValidatorRef.current, value);
+    if (result instanceof Promise) {
+      result = await result;
     }
-    const result = await onBlurValidatorRef.current(value);
+    return {
+      result
+    };
+  }, [callValidatorFnAsync, callValidatorFnSync]);
+  const revealOnBlurValidatorResult = (0, _react.useCallback)(_ref6 => {
+    let {
+      result
+    } = _ref6;
     persistErrorState('gracefully', result);
-    if (runAsync) {
+    if ((0, _isAsync.isAsync)(onBlurValidatorRef.current)) {
       defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
     }
     revealError();
-    forceUpdate();
-  }, [persistErrorState, defineAsyncProcess, setFieldState, revealError]);
+  }, [defineAsyncProcess, persistErrorState, revealError, setFieldState]);
+  const startOnBlurValidatorProcess = (0, _react.useCallback)(async function () {
+    let {
+      overrideValue = null
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (typeof onBlurValidatorRef.current !== 'function') {
+      return;
+    }
+    if ((0, _isAsync.isAsync)(onBlurValidatorRef.current)) {
+      defineAsyncProcess('onBlurValidator');
+      setFieldState('validating');
+    }
+    const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, 'onBlurValidator');
+    let result = (0, _isAsync.isAsync)(onBlurValidatorRef.current) ? await callValidatorFnAsync(onBlurValidatorRef.current, value) : callValidatorFnSync(onBlurValidatorRef.current, value);
+    if (result instanceof Promise) {
+      result = await result;
+    }
+    revealOnBlurValidatorResult({
+      result
+    });
+  }, [callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
+  const runOnBlurValidator = (0, _react.useCallback)(async () => {
+    if (!onBlurValidatorRef.current) {
+      return;
+    }
+    const {
+      result
+    } = await callOnBlurValidator();
+    if (String(result) !== String(validatorCacheRef.current.onBlurValidator) && revealErrorRef.current) {
+      if (result) {
+        revealOnBlurValidatorResult({
+          result
+        });
+      } else {
+        hideError();
+        clearErrorState();
+      }
+    }
+    validatorCacheRef.current.onBlurValidator = result || null;
+  }, [callOnBlurValidator, clearErrorState, hideError, revealOnBlurValidatorResult]);
   const prioritizeContextSchema = (0, _react.useMemo)(() => {
     if (errorPrioritization) {
       const schemaPath = identifier.split('/').join('/properties/');
@@ -450,8 +628,10 @@ function useFieldProps(localeProps) {
         const error = (0, _ajv.ajvErrorsToOneFormError)(schemaValidatorRef.current.errors, valueRef.current);
         throw error;
       }
-      if (validatorRef.current && (changedRef.current || validateInitially)) {
-        const result = await callValidator();
+      if (onChangeValidatorRef.current && (changedRef.current || validateInitially || validateUnchanged)) {
+        const {
+          result
+        } = await startOnChangeValidatorValidation();
         if (result instanceof Error) {
           throw result;
         }
@@ -466,7 +646,7 @@ function useFieldProps(localeProps) {
         persistErrorState('weak', error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, callValidator, persistErrorState]);
+  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, validateUnchanged, startOnChangeValidatorValidation, persistErrorState]);
   const handleError = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -474,9 +654,9 @@ function useFieldProps(localeProps) {
       hideError();
     }
   }, [continuousValidation, hideError, revealError]);
-  const setHasFocus = (0, _react.useCallback)(async (hasFocus, valueOverride, additionalArgs) => {
+  const setHasFocus = (0, _react.useCallback)(async (hasFocus, overrideValue, additionalArgs) => {
     const getArgs = type => {
-      const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, type);
+      const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, type);
       const transformedAdditionalArgs = transformers.current.transformAdditionalArgs(additionalArgs, value);
       return typeof transformedAdditionalArgs !== 'undefined' ? [value, transformedAdditionalArgs] : [value];
     };
@@ -491,28 +671,28 @@ function useFieldProps(localeProps) {
       if (!changedRef.current && !validateUnchanged) {
         return;
       }
-      addToPool('onBlurValidator', async () => await callOnBlurValidator({
-        valueOverride
+      addToPool('onBlurValidator', async () => await startOnBlurValidatorProcess({
+        overrideValue
       }), (0, _isAsync.isAsync)(onBlurValidatorRef.current));
       await runPool(() => {
         revealError();
         forceUpdate();
       });
     }
-  }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, revealError, validateUnchanged]);
-  const yieldAsyncProcess = (0, _react.useCallback)(async _ref5 => {
+  }, [onFocus, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
+  const yieldAsyncProcess = (0, _react.useCallback)(async _ref7 => {
     let {
       name,
       waitFor
-    } = _ref5;
+    } = _ref7;
     return new Promise(resolve => {
       const validateProcesses = () => {
-        const result = waitFor.some(_ref6 => {
+        const result = waitFor.some(_ref8 => {
           let {
             processName,
             withStates,
             hasValue
-          } = _ref6;
+          } = _ref8;
           const hasMatchingValue = hasValue === validatedValue.current;
           const result = (typeof hasValue === 'undefined' ? false : !hasMatchingValue) || (processName ? processName === asyncProcessRef.current : true) && (withStates === null || withStates === void 0 ? void 0 : withStates.some(state => {
             return state === fieldStateRef.current;
@@ -607,12 +787,15 @@ function useFieldProps(localeProps) {
     if (hasPath) {
       handlePathChangeUnvalidatedDataContext(identifier, newValue);
     }
-    addToPool('validator', validateValue, (0, _isAsync.isAsync)(validatorRef.current));
+    addToPool('validator', validateValue, (0, _isAsync.isAsync)(onChangeValidatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, (0, _isAsync.isAsync)(onChangeContext));
     await runPool(() => {
       handleError();
     });
   }, [hasPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleError]);
+  const setChanged = state => {
+    changedRef.current = state;
+  };
   const handleChange = (0, _react.useCallback)(async function (argFromInput) {
     let additionalArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
     const currentValue = valueRef.current;
@@ -670,32 +853,38 @@ function useFieldProps(localeProps) {
   const handleFocus = (0, _react.useCallback)(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = (0, _react.useCallback)(() => setHasFocus(false), [setHasFocus]);
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
-  (0, _useMountEffect.default)(() => {
-    dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleMountField(identifier);
+  (0, _react.useEffect)(() => {
+    handleMountField(identifier);
+    return () => {
+      handleUnMountField(identifier);
+      setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
+      setFieldError === null || setFieldError === void 0 ? void 0 : setFieldError(identifier, undefined);
+      localErrorRef.current = undefined;
+    };
+  }, [handleMountField, handleUnMountField, identifier, setFieldError, setFieldErrorDataContext]);
+  (0, _react.useEffect)(() => {
     validateValue();
-  });
-  (0, _useUnmountEffect.default)(() => {
-    dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleUnMountField(identifier);
-    setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
-    setFieldError === null || setFieldError === void 0 ? void 0 : setFieldError(identifier, undefined);
-    localErrorRef.current = undefined;
-  });
+  }, [validateValue]);
   (0, _useUpdateEffect.default)(() => {
     var _dataContext$ajvInsta2;
     schemaValidatorRef.current = schema ? (_dataContext$ajvInsta2 = dataContext.ajvInstance) === null || _dataContext$ajvInsta2 === void 0 ? void 0 : _dataContext$ajvInsta2.compile(schema) : undefined;
     validateValue();
   }, [schema, validateValue]);
+  const isEmptyData = (0, _react.useCallback)(() => {
+    var _dataContext$internal, _dataContext$props$em, _dataContext$props2;
+    return ((_dataContext$internal = dataContext.internalDataRef) === null || _dataContext$internal === void 0 ? void 0 : _dataContext$internal.current) === ((_dataContext$props$em = (_dataContext$props2 = dataContext.props) === null || _dataContext$props2 === void 0 ? void 0 : _dataContext$props2.emptyData) !== null && _dataContext$props$em !== void 0 ? _dataContext$props$em : _Provider.clearedData);
+  }, [dataContext.internalDataRef, (_dataContext$props3 = dataContext.props) === null || _dataContext$props3 === void 0 ? void 0 : _dataContext$props3.emptyData]);
   (0, _react.useEffect)(() => {
-    if (dataContext.data === _Provider.clearedData) {
+    if (isEmptyData()) {
       hideError();
     }
-  }, [dataContext.data, hideError]);
+  }, [externalValue, hideError, isEmptyData]);
   (0, _useUpdateEffect.default)(() => {
     if (valueRef.current !== externalValue) {
       valueRef.current = externalValue;
       validateValue();
+      forceUpdate();
     }
-    forceUpdate();
   }, [externalValue, validateValue]);
   (0, _react.useEffect)(() => {
     if (!hasLocalErrorRef.current) {
@@ -710,6 +899,14 @@ function useFieldProps(localeProps) {
       }
     }
   }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
+  (0, _react.useEffect)(() => {
+    if (itemPath && valueProp !== undefined) {
+      (0, _componentHelper.warn)(`Using value="${valueProp}" prop inside Iterate is not supported yet`);
+    }
+    if (itemPath && defaultValue !== undefined) {
+      (0, _componentHelper.warn)(`Using defaultValue="${defaultValue}" prop inside Iterate is not supported yet`);
+    }
+  }, [defaultValue, itemPath, valueProp]);
   (0, _react.useEffect)(() => {
     if (hasPath) {
       let value = valueProp;
@@ -734,7 +931,7 @@ function useFieldProps(localeProps) {
         validateDataDataContext === null || validateDataDataContext === void 0 ? void 0 : validateDataDataContext();
       }
     }
-  }, [dataContext.data, dataContext.id, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
+  }, [dataContext.data, dataContext.id, defaultValue, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
   (0, _react.useEffect)(() => {
     if (showAllErrors || showBoundaryErrors) {
       if (fieldStateRef.current !== 'validating') {
@@ -745,7 +942,7 @@ function useFieldProps(localeProps) {
     }
   }, [hideError, revealError, showAllErrors, showBoundaryErrors]);
   (0, _react.useEffect)(() => {
-    if (dataContext.formState === 'pending' && (validatorRef.current || onBlurValidatorRef.current)) {
+    if (dataContext.formState === 'pending' && (onChangeValidatorRef.current || onBlurValidatorRef.current)) {
       hideError();
       forceUpdate();
     }
@@ -754,50 +951,43 @@ function useFieldProps(localeProps) {
     if (hasError()) {
       return;
     }
-    addToPool('validator', callValidator, (0, _isAsync.isAsync)(validatorRef.current));
-    addToPool('onBlurValidator', callOnBlurValidator, (0, _isAsync.isAsync)(onBlurValidatorRef.current));
+    addToPool('validator', startOnChangeValidatorValidation, (0, _isAsync.isAsync)(onChangeValidatorRef.current));
+    addToPool('onBlurValidator', startOnBlurValidatorProcess, (0, _isAsync.isAsync)(onBlurValidatorRef.current));
     await runPool();
-  }, [addToPool, callOnBlurValidator, callValidator, hasError, runPool]);
-  (0, _useMountEffect.default)(() => {
-    var _dataContext$setField;
-    dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$setField = dataContext.setFieldEventListener) === null || _dataContext$setField === void 0 ? void 0 : _dataContext$setField.call(dataContext, identifier, 'onSubmit', onSubmitHandler);
-  });
-  (0, _useMountEffect.default)(() => {
+  }, [addToPool, startOnBlurValidatorProcess, hasError, runPool, startOnChangeValidatorValidation]);
+  (0, _react.useEffect)(() => {
+    setFieldEventListener === null || setFieldEventListener === void 0 ? void 0 : setFieldEventListener(identifier, 'onSubmit', onSubmitHandler);
+  }, [identifier, onSubmitHandler, setFieldEventListener]);
+  (0, _react.useEffect)(() => {
     if (inFieldBlock) {
-      if (errorProp) {
-        setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
-          identifier,
-          type: 'error',
-          content: errorProp,
-          showInitially: true,
-          show: true
-        });
-      }
-      if (warning) {
-        setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
-          identifier,
-          type: 'warning',
-          content: warning,
-          showInitially: true,
-          show: true
-        });
-      }
-      if (info) {
-        setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
-          identifier,
-          type: 'info',
-          content: info,
-          showInitially: true,
-          show: true
-        });
-      }
+      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+        identifier,
+        type: 'error',
+        content: errorProp,
+        showInitially: true,
+        show: true
+      });
+      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+        identifier,
+        type: 'warning',
+        content: warning,
+        showInitially: true,
+        show: true
+      });
+      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+        identifier,
+        type: 'info',
+        content: info,
+        showInitially: true,
+        show: true
+      });
       return () => {
         if (mountedFieldsRefFieldBlock) {
           mountedFieldsRefFieldBlock.current[identifier] = true;
         }
       };
     }
-  });
+  }, [errorProp, identifier, inFieldBlock, info, mountedFieldsRefFieldBlock, setFieldStateFieldBlock, warning]);
   const infoRef = (0, _react.useRef)(info);
   const warningRef = (0, _react.useRef)(warning);
   (0, _useUpdateEffect.default)(() => {
@@ -838,18 +1028,23 @@ function useFieldProps(localeProps) {
     info: !inFieldBlock ? infoRef.current : undefined,
     warning: !inFieldBlock ? warningRef.current : undefined,
     error: !inFieldBlock ? error : undefined,
+    required,
+    labelSuffix: props.labelSuffix,
     disabled: onBlurValidator && asyncProcessRef.current === 'onBlurValidator' && fieldStateRef.current === 'validating' ? true : disabled,
     fieldState: resolveValidatingState(fieldStateRef.current)
   };
   const sharedData = (0, _useSharedState.useSharedState)('field-block-props-' + id);
   sharedData.set(fieldBlockProps);
+  (0, _react.useEffect)(() => {
+    isInternalRerenderRef.current = undefined;
+  });
   return _objectSpread(_objectSpread(_objectSpread({}, props), fieldBlockProps), {}, {
     name: props.name || ((_props$path = props.path) === null || _props$path === void 0 ? void 0 : _props$path.replace('/', '')) || id,
     autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : dataContext.autoComplete === true ? 'on' : undefined,
     id,
     value: transformers.current.transformIn(transformers.current.toInput(valueRef.current)),
     hasError: hasVisibleError,
-    isChanged: changedRef.current,
+    isChanged: Boolean(changedRef.current),
     props,
     htmlAttributes,
     setHasFocus,
@@ -857,6 +1052,7 @@ function useFieldProps(localeProps) {
     handleBlur,
     handleChange,
     updateValue,
+    setChanged,
     forceUpdate,
     dataContext
   });