@dnb/eufemia 10.51.2 → 10.52.0

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

@@ -22,6 +22,7 @@ var _SectionContext = _interopRequireDefault(require("../Form/Section/SectionCon
 var _FieldBoundaryContext = _interopRequireDefault(require("../DataContext/FieldBoundary/FieldBoundaryContext"));
 var _VisibilityContext = _interopRequireDefault(require("../Form/Visibility/VisibilityContext"));
 var _Context = _interopRequireDefault(require("../Wizard/Context"));
+var _SnapshotContext = _interopRequireDefault(require("../Form/Snapshot/SnapshotContext"));
 var _useProcessManager = _interopRequireDefault(require("./useProcessManager"));
 var _usePath = _interopRequireDefault(require("./usePath"));
 var _useSharedState = require("../../../shared/helpers/useSharedState");
@@ -111,6 +112,9 @@ function useFieldProps(localeProps) {
   const sectionContext = (0, _react.useContext)(_SectionContext.default);
   const fieldBoundaryContext = (0, _react.useContext)(_FieldBoundaryContext.default);
   const wizardContext = (0, _react.useContext)(_Context.default);
+  const {
+    setMountedField: setMountedFieldSnapshot
+  } = (0, _react.useContext)(_SnapshotContext.default) || {};
   const {
     isVisible
   } = (0, _react.useContext)(_VisibilityContext.default) || {};
@@ -151,7 +155,9 @@ function useFieldProps(localeProps) {
     mountedFieldsRef: mountedFieldsRefFieldBlock
   } = fieldBlockContext || {};
   const {
-    handleChange: handleChangeIterateContext
+    handleChange: handleChangeIterateContext,
+    index: iterateIndex,
+    arrayValue: iterateArrayValue
   } = iterateItemContext || {};
   const {
     path: sectionPath,
@@ -163,6 +169,7 @@ function useFieldProps(localeProps) {
     showBoundaryErrors
   } = fieldBoundaryContext || {};
   const hasPath = Boolean(pathProp);
+  const hasItemPath = Boolean(itemPath);
   const {
     path,
     identifier,
@@ -383,29 +390,24 @@ function useFieldProps(localeProps) {
     });
     return args;
   }, [contextErrorMessages, getValueByPath, setFieldEventListener]);
-  const extendWithExportedValidators = (0, _react.useCallback)((validator, result) => {
-    if (exportValidatorsRef.current && !result && (validator === onChangeValidatorRef.current || validator === onBlurValidatorRef.current)) {
-      return Object.values(exportValidatorsRef.current);
-    }
-    return result;
-  }, []);
   const callStackRef = (0, _react.useRef)([]);
   const hasBeenCalledRef = (0, _react.useCallback)(validator => {
     const result = callStackRef.current.includes(validator);
     callStackRef.current.push(validator);
     return result;
   }, []);
-  const callValidatorFnSync = (0, _react.useCallback)(function (validator) {
+  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;
     }
-    const result = extendWithExportedValidators(validator, validator(value, additionalArgs));
+    const result = await validator(value, additionalArgs);
     if (Array.isArray(result)) {
       for (const validator of result) {
         if (!hasBeenCalledRef(validator)) {
-          const result = callValidatorFnSync(validator, value);
+          const result = await callValidatorFnAsync(validator, value);
           if (result instanceof Error) {
+            callStackRef.current = [];
             return result;
           }
         }
@@ -414,18 +416,27 @@ function useFieldProps(localeProps) {
     } else {
       return result;
     }
-  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
-  const callValidatorFnAsync = (0, _react.useCallback)(async function (validator) {
+  }, [additionalArgs, hasBeenCalledRef]);
+  const callValidatorFnSync = (0, _react.useCallback)(function (validator) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : valueRef.current;
     if (typeof validator !== 'function') {
       return;
     }
-    const result = extendWithExportedValidators(validator, await validator(value, additionalArgs));
+    const result = validator(value, additionalArgs);
     if (Array.isArray(result)) {
+      const hasAsyncValidator = result.some(validator => (0, _isAsync.isAsync)(validator));
+      if (hasAsyncValidator) {
+        return new Promise(resolve => {
+          callValidatorFnAsync(validator, value).then(result => {
+            resolve(result);
+          });
+        });
+      }
       for (const validator of result) {
         if (!hasBeenCalledRef(validator)) {
-          const result = await callValidatorFnAsync(validator, value);
+          const result = callValidatorFnSync(validator, value);
           if (result instanceof Error) {
+            callStackRef.current = [];
             return result;
           }
         }
@@ -434,7 +445,7 @@ function useFieldProps(localeProps) {
     } else {
       return result;
     }
-  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
+  }, [additionalArgs, callValidatorFnAsync, hasBeenCalledRef]);
   const stateId = (0, _useId.default)();
   const persistErrorState = (0, _react.useCallback)(function (method) {
     let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
@@ -669,6 +680,14 @@ function useFieldProps(localeProps) {
           throw result;
         }
       }
+      if (onBlurValidatorRef.current && validateInitially && !changedRef.current) {
+        const {
+          result
+        } = await callOnBlurValidator();
+        if (result instanceof Error) {
+          throw result;
+        }
+      }
       if (isProcessActive()) {
         clearErrorState();
       }
@@ -679,7 +698,7 @@ function useFieldProps(localeProps) {
         persistErrorState('weak', error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, validateUnchanged, startOnChangeValidatorValidation, persistErrorState]);
+  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, validateUnchanged, startOnChangeValidatorValidation, callOnBlurValidator, persistErrorState]);
   const handleError = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -710,9 +729,15 @@ function useFieldProps(localeProps) {
     if (hasFocus) {
       hasFocusRef.current = true;
       onFocus === null || onFocus === void 0 ? void 0 : onFocus.apply(this, args);
+      setMountedFieldStateDataContext(identifier, {
+        isFocused: true
+      });
     } else {
       hasFocusRef.current = false;
       onBlur === null || onBlur === void 0 ? void 0 : onBlur.apply(this, args);
+      setMountedFieldStateDataContext(identifier, {
+        isFocused: false
+      });
       if (!changedRef.current && !validateUnchanged) {
         return;
       }
@@ -724,7 +749,7 @@ function useFieldProps(localeProps) {
         forceUpdate();
       });
     }
-  }, [getEventArgs, onFocus, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
+  }, [getEventArgs, onFocus, setMountedFieldStateDataContext, identifier, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
   const yieldAsyncProcess = (0, _react.useCallback)(async _ref8 => {
     let {
       name,
@@ -830,11 +855,12 @@ function useFieldProps(localeProps) {
     forceUpdate();
   }, [asyncBehaviorIsEnabled, executeOnChangeRegardlessOfError, hasPath, yieldAsyncProcess, onChangeContext, defineAsyncProcess, hasError, setEventResult, handlePathChangeDataContext, identifier]);
   const updateValue = (0, _react.useCallback)(async newValue => {
+    var _transformers$current2;
     const currentValue = valueRef.current;
     if (newValue === currentValue) {
       return;
     }
-    const transformedValue = transformers.current.transformValue(newValue, currentValue);
+    const transformedValue = (_transformers$current2 = transformers.current.transformValue(newValue, currentValue)) !== null && _transformers$current2 !== void 0 ? _transformers$current2 : emptyValue;
     const contextValue = transformers.current.transformOut(transformedValue, transformers.current.provideAdditionalArgs(transformedValue, additionalArgs));
     valueRef.current = transformedValue;
     if (hasPath) {
@@ -848,7 +874,7 @@ function useFieldProps(localeProps) {
     await runPool(() => {
       handleError();
     });
-  }, [additionalArgs, hasPath, itemPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleChangeIterateContext, makeIteratePath, handleError]);
+  }, [emptyValue, additionalArgs, hasPath, itemPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleChangeIterateContext, makeIteratePath, handleError]);
   const setChanged = state => {
     changedRef.current = state;
   };
@@ -943,13 +969,19 @@ function useFieldProps(localeProps) {
       isMounted: true,
       isPreMounted: true
     });
+    setMountedFieldSnapshot === null || setMountedFieldSnapshot === void 0 ? void 0 : setMountedFieldSnapshot(identifier, {
+      isMounted: true
+    });
     return () => {
       setMountedFieldStateDataContext(identifier, {
         isMounted: false,
         isPreMounted: false
       });
+      setMountedFieldSnapshot === null || setMountedFieldSnapshot === void 0 ? void 0 : setMountedFieldSnapshot(identifier, {
+        isMounted: false
+      });
     };
-  }, [identifier, setMountedFieldStateDataContext]);
+  }, [identifier, setMountedFieldSnapshot, setMountedFieldStateDataContext]);
   (0, _react.useEffect)(() => {
     return () => {
       setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
@@ -964,21 +996,21 @@ function useFieldProps(localeProps) {
     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]);
+  }, [schema]);
   const externalValueDidChangeRef = (0, _react.useRef)(false);
   useLayoutEffect(() => {
     if (valueRef.current !== externalValue) {
       valueRef.current = externalValue;
       externalValueDidChangeRef.current = true;
     }
-  }, [externalValue]);
-  (0, _react.useEffect)(() => {
+  }, [externalValue, hasItemPath]);
+  (0, _useUpdateEffect.default)(() => {
     if (externalValueDidChangeRef.current) {
       externalValueDidChangeRef.current = false;
       validateValue();
       forceUpdate();
     }
-  }, [externalValue, validateValue]);
+  }, [externalValue]);
   (0, _react.useEffect)(() => {
     if (!hasLocalErrorRef.current) {
       const error = prepareError(dataContextError);
@@ -992,21 +1024,13 @@ 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]);
   const tmpTransValueRef = (0, _react.useRef)({});
   const setContextData = (0, _react.useCallback)(() => {
     var _dataContext$internal;
-    if (!hasPath) {
+    if (!hasPath && !hasItemPath) {
       return;
     }
-    let valueToStore = valueProp;
+    let valueToStore = valueProp !== null && valueProp !== void 0 ? valueProp : emptyValue;
     const data = wizardContext !== null && wizardContext !== void 0 && wizardContext.prerenderFieldProps ? dataContext.data : (_dataContext$internal = dataContext.internalDataRef) === null || _dataContext$internal === void 0 ? void 0 : _dataContext$internal.current;
     const hasValue = _jsonPointer.default.has(data, identifier) || identifier === '/';
     const existingValue = transformers.current.transformIn(identifier === '/' ? data : hasValue ? _jsonPointer.default.get(data, identifier) : undefined);
@@ -1025,6 +1049,23 @@ function useFieldProps(localeProps) {
       valueToStore = defaultValueRef.current;
       defaultValueRef.current = undefined;
     }
+    let skipEqualCheck = false;
+    if (hasItemPath) {
+      if (existingValue === valueToStore) {
+        return;
+      }
+      if (typeof valueToStore === 'undefined' && typeof existingValue !== 'undefined') {
+        valueToStore = existingValue;
+      }
+      if (itemPath === '/') {
+        if (existingValue === _Provider.clearedData) {
+          valueRef.current = undefined;
+        }
+        if (hasDefaultValue && Array.isArray(existingValue)) {
+          skipEqualCheck = true;
+        }
+      }
+    }
     if (updateContextDataInSync) {
       if (hasDefaultValue && hasValue) {
         return;
@@ -1033,7 +1074,7 @@ function useFieldProps(localeProps) {
         return;
       }
     }
-    if (hasValue && (valueToStore === existingValue || valueRef.current === existingValue)) {
+    if (!skipEqualCheck && hasValue && (valueToStore === existingValue || valueRef.current === existingValue)) {
       return;
     }
     if (identifier in tmpTransValueRef.current && tmpTransValueRef.current[identifier] === valueToStore) {
@@ -1044,17 +1085,17 @@ function useFieldProps(localeProps) {
       tmpTransValueRef.current[identifier] = valueToStore;
       valueToStore = transformedValue;
     }
-    const preventUpdate = updateContextDataInSync;
+    const preventUpdate = updateContextDataInSync || hasItemPath && iterateIndex < (iterateArrayValue === null || iterateArrayValue === void 0 ? void 0 : iterateArrayValue.length) - 1;
     updateDataValueDataContext === null || updateDataValueDataContext === void 0 ? void 0 : updateDataValueDataContext(identifier, valueToStore, {
       preventUpdate
     });
     if (!preventUpdate) {
       validateDataDataContext === null || validateDataDataContext === void 0 ? void 0 : validateDataDataContext();
     }
-  }, [dataContext.data, dataContext.id, dataContext.internalDataRef, hasPath, identifier, updateContextDataInSync, updateDataValueDataContext, validateDataDataContext, valueProp, wizardContext === null || wizardContext === void 0 ? void 0 : wizardContext.prerenderFieldProps]);
+  }, [dataContext.data, dataContext.id, dataContext.internalDataRef, emptyValue, hasItemPath, hasPath, identifier, itemPath, iterateArrayValue === null || iterateArrayValue === void 0 ? void 0 : iterateArrayValue.length, iterateIndex, updateContextDataInSync, updateDataValueDataContext, validateDataDataContext, valueProp, wizardContext === null || wizardContext === void 0 ? void 0 : wizardContext.prerenderFieldProps]);
   const isEmptyData = (0, _react.useCallback)(() => {
-    var _dataContext$internal2, _dataContext$props$em, _dataContext$props2;
-    return ((_dataContext$internal2 = dataContext.internalDataRef) === null || _dataContext$internal2 === void 0 ? void 0 : _dataContext$internal2.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);
+    var _dataContext$isEmptyD, _dataContext$internal2, _dataContext$props$em, _dataContext$props2;
+    return ((_dataContext$isEmptyD = dataContext.isEmptyDataRef) === null || _dataContext$isEmptyD === void 0 ? void 0 : _dataContext$isEmptyD.current) || ((_dataContext$internal2 = dataContext.internalDataRef) === null || _dataContext$internal2 === void 0 ? void 0 : _dataContext$internal2.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, externalValue]);
   useLayoutEffect(() => {
     if (isEmptyData()) {
@@ -1076,10 +1117,8 @@ function useFieldProps(localeProps) {
   }, [isEmptyData, updateContextDataInSync, setContextData]);
   (0, _react.useEffect)(() => {
     if (isEmptyData()) {
-      requestAnimationFrame(() => {
-        setContextData();
-        validateValue();
-      });
+      setContextData();
+      validateValue();
     }
   }, [isEmptyData, setContextData, validateValue]);
   (0, _react.useEffect)(() => {