@dnb/eufemia 10.51.2 → 10.52.0

package/es/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';
@@ -91,6 +92,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) || {};
@@ -131,7 +135,9 @@ export default function useFieldProps(localeProps, {
     mountedFieldsRef: mountedFieldsRefFieldBlock
   } = fieldBlockContext || {};
   const {
-    handleChange: handleChangeIterateContext
+    handleChange: handleChangeIterateContext,
+    index: iterateIndex,
+    arrayValue: iterateArrayValue
   } = iterateItemContext || {};
   const {
     path: sectionPath,
@@ -143,6 +149,7 @@ export default function useFieldProps(localeProps, {
     showBoundaryErrors
   } = fieldBoundaryContext || {};
   const hasPath = Boolean(pathProp);
+  const hasItemPath = Boolean(itemPath);
   const {
     path,
     identifier,
@@ -361,28 +368,23 @@ 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((validator, value = valueRef.current) => {
+  const callValidatorFnAsync = useCallback(async (validator, value = 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;
           }
         }
@@ -391,17 +393,26 @@ export default function useFieldProps(localeProps, {
     } else {
       return result;
     }
-  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
-  const callValidatorFnAsync = useCallback(async (validator, value = valueRef.current) => {
+  }, [additionalArgs, hasBeenCalledRef]);
+  const callValidatorFnSync = useCallback((validator, value = 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;
           }
         }
@@ -410,7 +421,7 @@ export default function useFieldProps(localeProps, {
     } else {
       return result;
     }
-  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
+  }, [additionalArgs, callValidatorFnAsync, hasBeenCalledRef]);
   const stateId = useId();
   const persistErrorState = useCallback((method, errorArg = undefined) => {
     const error = prepareError(errorArg);
@@ -640,6 +651,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();
       }
@@ -650,7 +669,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();
@@ -680,9 +699,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;
       }
@@ -694,7 +719,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 ({
     name,
     waitFor
@@ -798,11 +823,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) {
@@ -816,7 +842,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;
   };
@@ -910,13 +936,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);
@@ -931,21 +963,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);
@@ -959,21 +991,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);
@@ -992,6 +1016,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;
@@ -1000,7 +1041,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) {
@@ -1011,17 +1052,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()) {
@@ -1043,10 +1084,8 @@ export default function useFieldProps(localeProps, {
   }, [isEmptyData, updateContextDataInSync, setContextData]);
   useEffect(() => {
     if (isEmptyData()) {
-      requestAnimationFrame(() => {
-        setContextData();
-        validateValue();
-      });
+      setContextData();
+      validateValue();
     }
   }, [isEmptyData, setContextData, validateValue]);
   useEffect(() => {