@dnb/eufemia 10.51.2 → 10.52.0

package/extensions/forms/hooks/useFieldProps.js

@@ -11,7 +11,7 @@ import { FormError } from '../types';
 import { Context as DataContext } from '../DataContext';
 import { clearedData } from '../DataContext/Provider/Provider';
 import FieldProviderContext from '../Field/Provider/FieldProviderContext';
-import { combineDescribedBy, warn } from '../../../shared/component-helper';
+import { combineDescribedBy } from '../../../shared/component-helper';
 import useId from '../../../shared/helpers/useId';
 import useUpdateEffect from '../../../shared/helpers/useUpdateEffect';
 import FieldBlockContext from '../FieldBlock/FieldBlockContext';
@@ -20,6 +20,7 @@ import SectionContext from '../Form/Section/SectionContext';
 import FieldBoundaryContext from '../DataContext/FieldBoundary/FieldBoundaryContext';
 import VisibilityContext from '../Form/Visibility/VisibilityContext';
 import WizardContext from '../Wizard/Context';
+import SnapshotContext from '../Form/Snapshot/SnapshotContext';
 import useProcessManager from './useProcessManager';
 import usePath from './usePath';
 import { createSharedState, useSharedState } from '../../../shared/helpers/useSharedState';
@@ -101,6 +102,9 @@ export default function useFieldProps(localeProps) {
   const sectionContext = useContext(SectionContext);
   const fieldBoundaryContext = useContext(FieldBoundaryContext);
   const wizardContext = useContext(WizardContext);
+  const {
+    setMountedField: setMountedFieldSnapshot
+  } = useContext(SnapshotContext) || {};
   const {
     isVisible
   } = useContext(VisibilityContext) || {};
@@ -141,7 +145,9 @@ export default function useFieldProps(localeProps) {
     mountedFieldsRef: mountedFieldsRefFieldBlock
   } = fieldBlockContext || {};
   const {
-    handleChange: handleChangeIterateContext
+    handleChange: handleChangeIterateContext,
+    index: iterateIndex,
+    arrayValue: iterateArrayValue
   } = iterateItemContext || {};
   const {
     path: sectionPath,
@@ -153,6 +159,7 @@ export default function useFieldProps(localeProps) {
     showBoundaryErrors
   } = fieldBoundaryContext || {};
   const hasPath = Boolean(pathProp);
+  const hasItemPath = Boolean(itemPath);
   const {
     path,
     identifier,
@@ -373,29 +380,24 @@ export default function useFieldProps(localeProps) {
     });
     return args;
   }, [contextErrorMessages, getValueByPath, setFieldEventListener]);
-  const extendWithExportedValidators = useCallback((validator, result) => {
-    if (exportValidatorsRef.current && !result && (validator === onChangeValidatorRef.current || validator === onBlurValidatorRef.current)) {
-      return Object.values(exportValidatorsRef.current);
-    }
-    return result;
-  }, []);
   const callStackRef = useRef([]);
   const hasBeenCalledRef = useCallback(validator => {
     const result = callStackRef.current.includes(validator);
     callStackRef.current.push(validator);
     return result;
   }, []);
-  const callValidatorFnSync = useCallback(function (validator) {
+  const callValidatorFnAsync = 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;
           }
         }
@@ -404,18 +406,27 @@ export default function useFieldProps(localeProps) {
     } else {
       return result;
     }
-  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
-  const callValidatorFnAsync = useCallback(async function (validator) {
+  }, [additionalArgs, hasBeenCalledRef]);
+  const callValidatorFnSync = 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 => 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;
           }
         }
@@ -424,7 +435,7 @@ export default function useFieldProps(localeProps) {
     } else {
       return result;
     }
-  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
+  }, [additionalArgs, callValidatorFnAsync, hasBeenCalledRef]);
   const stateId = useId();
   const persistErrorState = useCallback(function (method) {
     let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
@@ -659,6 +670,14 @@ export default function useFieldProps(localeProps) {
           throw result;
         }
       }
+      if (onBlurValidatorRef.current && validateInitially && !changedRef.current) {
+        const {
+          result
+        } = await callOnBlurValidator();
+        if (result instanceof Error) {
+          throw result;
+        }
+      }
       if (isProcessActive()) {
         clearErrorState();
       }
@@ -669,7 +688,7 @@ export default 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 = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -700,9 +719,15 @@ export default 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;
       }
@@ -714,7 +739,7 @@ export default function useFieldProps(localeProps) {
         forceUpdate();
       });
     }
-  }, [getEventArgs, onFocus, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
+  }, [getEventArgs, onFocus, setMountedFieldStateDataContext, identifier, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
   const yieldAsyncProcess = useCallback(async _ref8 => {
     let {
       name,
@@ -820,11 +845,12 @@ export default function useFieldProps(localeProps) {
     forceUpdate();
   }, [asyncBehaviorIsEnabled, executeOnChangeRegardlessOfError, hasPath, yieldAsyncProcess, onChangeContext, defineAsyncProcess, hasError, setEventResult, handlePathChangeDataContext, identifier]);
   const updateValue = 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) {
@@ -838,7 +864,7 @@ export default 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;
   };
@@ -933,13 +959,19 @@ export default 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]);
   useEffect(() => {
     return () => {
       setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
@@ -954,21 +986,21 @@ export default 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 = useRef(false);
   useLayoutEffect(() => {
     if (valueRef.current !== externalValue) {
       valueRef.current = externalValue;
       externalValueDidChangeRef.current = true;
     }
-  }, [externalValue]);
-  useEffect(() => {
+  }, [externalValue, hasItemPath]);
+  useUpdateEffect(() => {
     if (externalValueDidChangeRef.current) {
       externalValueDidChangeRef.current = false;
       validateValue();
       forceUpdate();
     }
-  }, [externalValue, validateValue]);
+  }, [externalValue]);
   useEffect(() => {
     if (!hasLocalErrorRef.current) {
       const error = prepareError(dataContextError);
@@ -982,21 +1014,13 @@ export default function useFieldProps(localeProps) {
       }
     }
   }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
-  useEffect(() => {
-    if (itemPath && valueProp !== undefined) {
-      warn(`Using value="${valueProp}" prop inside Iterate is not supported yet`);
-    }
-    if (itemPath && defaultValue !== undefined) {
-      warn(`Using defaultValue="${defaultValue}" prop inside Iterate is not supported yet`);
-    }
-  }, [defaultValue, itemPath, valueProp]);
   const tmpTransValueRef = useRef({});
   const setContextData = 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 = pointer.has(data, identifier) || identifier === '/';
     const existingValue = transformers.current.transformIn(identifier === '/' ? data : hasValue ? pointer.get(data, identifier) : undefined);
@@ -1015,6 +1039,23 @@ export default 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 === clearedData) {
+          valueRef.current = undefined;
+        }
+        if (hasDefaultValue && Array.isArray(existingValue)) {
+          skipEqualCheck = true;
+        }
+      }
+    }
     if (updateContextDataInSync) {
       if (hasDefaultValue && hasValue) {
         return;
@@ -1023,7 +1064,7 @@ export default 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) {
@@ -1034,17 +1075,17 @@ export default 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 = 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 : 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 : clearedData);
   }, [dataContext.internalDataRef, (_dataContext$props3 = dataContext.props) === null || _dataContext$props3 === void 0 ? void 0 : _dataContext$props3.emptyData, externalValue]);
   useLayoutEffect(() => {
     if (isEmptyData()) {
@@ -1066,10 +1107,8 @@ export default function useFieldProps(localeProps) {
   }, [isEmptyData, updateContextDataInSync, setContextData]);
   useEffect(() => {
     if (isEmptyData()) {
-      requestAnimationFrame(() => {
-        setContextData();
-        validateValue();
-      });
+      setContextData();
+      validateValue();
     }
   }, [isEmptyData, setContextData, validateValue]);
   useEffect(() => {