@dnb/eufemia 10.49.0 → 10.50.0

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

@@ -3,7 +3,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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; }
-import { useRef, useEffect, useContext, useCallback, useMemo, useReducer } from 'react';
+import React, { useRef, useEffect, useContext, useCallback, useMemo, useReducer } from 'react';
 import pointer from 'json-pointer';
 import { errorChanged } from '../utils';
 import { ajvErrorsToOneFormError } from '../utils/ajv';
@@ -18,6 +18,8 @@ import FieldBlockContext from '../FieldBlock/FieldBlockContext';
 import IterateElementContext from '../Iterate/IterateItemContext';
 import SectionContext from '../Form/Section/SectionContext';
 import FieldBoundaryContext from '../DataContext/FieldBoundary/FieldBoundaryContext';
+import VisibilityContext from '../Form/Visibility/VisibilityContext';
+import WizardContext from '../Wizard/Context';
 import useProcessManager from './useProcessManager';
 import usePath from './usePath';
 import { createSharedState, useSharedState } from '../../../shared/helpers/useSharedState';
@@ -25,6 +27,7 @@ import { isAsync } from '../../../shared/helpers/isAsync';
 import useTranslation from './useTranslation';
 import useExternalValue from './useExternalValue';
 import useDataValue from './useDataValue';
+const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 export default function useFieldProps(localeProps, {
   executeOnChangeRegardlessOfError = false
 } = {}) {
@@ -61,7 +64,7 @@ export default function useFieldProps(localeProps, {
     fromInput = value => value,
     toEvent = value => value,
     transformValue = value => value,
-    transformAdditionalArgs = additionalArgs => additionalArgs,
+    provideAdditionalArgs = (value, additionalArgs) => additionalArgs,
     fromExternal = value => value,
     validateRequired = (value, {
       emptyValue,
@@ -86,11 +89,15 @@ export default function useFieldProps(localeProps, {
   const iterateItemContext = useContext(IterateElementContext);
   const sectionContext = useContext(SectionContext);
   const fieldBoundaryContext = useContext(FieldBoundaryContext);
+  const wizardContext = useContext(WizardContext);
+  const {
+    isVisible
+  } = useContext(VisibilityContext) || {};
   const translation = useTranslation();
   const transformers = useRef({
     transformIn,
     transformOut,
-    transformAdditionalArgs,
+    provideAdditionalArgs,
     toInput,
     fromInput,
     toEvent,
@@ -144,6 +151,9 @@ export default function useFieldProps(localeProps, {
     itemPath
   });
   const defaultValueRef = useRef(defaultValue);
+  useLayoutEffect(() => {
+    defaultValueRef.current = defaultValue;
+  }, []);
   const externalValue = (_useExternalValue = useExternalValue({
     path,
     itemPath,
@@ -350,43 +360,55 @@ 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) && !Array.isArray(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) => {
     if (typeof validator !== 'function') {
-      return undefined;
+      return;
     }
     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;
+        if (!hasBeenCalledRef(validator)) {
+          const result = callValidatorFnSync(validator, value);
+          if (result instanceof Error) {
+            return result;
+          }
         }
       }
-      return;
+      callStackRef.current = [];
+    } else {
+      return result;
     }
-    return result;
-  }, [additionalArgs, extendWithExportedValidators]);
+  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
   const callValidatorFnAsync = useCallback(async (validator, value = valueRef.current) => {
     if (typeof validator !== 'function') {
-      return undefined;
+      return;
     }
     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;
+        if (!hasBeenCalledRef(validator)) {
+          const result = await callValidatorFnAsync(validator, value);
+          if (result instanceof Error) {
+            return result;
+          }
         }
       }
-      return;
+      callStackRef.current = [];
+    } else {
+      return result;
     }
-    return result;
-  }, [additionalArgs, extendWithExportedValidators]);
+  }, [additionalArgs, extendWithExportedValidators, hasBeenCalledRef]);
   const stateId = useId();
   const persistErrorState = useCallback((method, errorArg = undefined) => {
     const error = prepareError(errorArg);
@@ -629,19 +651,29 @@ export default function useFieldProps(localeProps, {
       hideError();
     }
   }, [continuousValidation, hideError, revealError]);
+  const getEventArgs = useCallback(({
+    eventName,
+    additionalArgs,
+    overrideValue = undefined
+  }) => {
+    const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, eventName);
+    const args = transformers.current.provideAdditionalArgs(value, additionalArgs);
+    if (typeof args !== 'undefined') {
+      return [value, args];
+    }
+    return [value];
+  }, []);
   const setHasFocus = useCallback(async (hasFocus, overrideValue, additionalArgs) => {
-    const getArgs = 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];
-    };
+    const args = getEventArgs({
+      eventName: hasFocus ? 'onFocus' : 'onBlur',
+      overrideValue,
+      additionalArgs
+    });
     if (hasFocus) {
       hasFocusRef.current = true;
-      const args = getArgs('onFocus');
       onFocus === null || onFocus === void 0 ? void 0 : onFocus.apply(this, args);
     } else {
       hasFocusRef.current = false;
-      const args = getArgs('onBlur');
       onBlur === null || onBlur === void 0 ? void 0 : onBlur.apply(this, args);
       if (!changedRef.current && !validateUnchanged) {
         return;
@@ -654,7 +686,7 @@ export default function useFieldProps(localeProps, {
         forceUpdate();
       });
     }
-  }, [onFocus, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
+  }, [getEventArgs, onFocus, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
   const yieldAsyncProcess = useCallback(async ({
     name,
     waitFor
@@ -775,7 +807,7 @@ export default function useFieldProps(localeProps, {
     if (fromInput === currentValue) {
       return;
     }
-    const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue));
+    const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue), transformers.current.provideAdditionalArgs(fromInput, additionalArgs));
     changedRef.current = true;
     if (itemPath) {
       handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(itemPath, ''), transformedValue);
@@ -786,14 +818,12 @@ export default function useFieldProps(localeProps, {
     } else {
       updateValue(transformedValue);
     }
-    const getArgs = () => {
-      const value = transformers.current.toEvent(valueRef.current, 'onChange');
-      const transformedAdditionalArgs = transformers.current.transformAdditionalArgs(additionalArgs, value);
-      return typeof transformedAdditionalArgs !== 'undefined' ? [value, transformedAdditionalArgs] : [value];
-    };
     if (isAsync(onChange)) {
       addToPool('onChangeLocal', async () => {
-        const args = getArgs();
+        const args = getEventArgs({
+          eventName: 'onChange',
+          additionalArgs
+        });
         await yieldAsyncProcess({
           name: 'onChangeLocal',
           waitFor: [{
@@ -818,21 +848,62 @@ export default function useFieldProps(localeProps, {
         }
       }, true);
     } else {
-      setEventResult(onChange === null || onChange === void 0 ? void 0 : onChange.apply(this, getArgs()));
+      const args = getEventArgs({
+        eventName: 'onChange',
+        additionalArgs
+      });
+      setEventResult(onChange === null || onChange === void 0 ? void 0 : onChange.apply(this, args));
     }
     await runPool();
-  }, [itemPath, asyncBehaviorIsEnabled, onChange, runPool, handleChangeIterateContext, makeIteratePath, hideError, updateValue, addToPool, yieldAsyncProcess, defineAsyncProcess, hasError, setEventResult]);
+  }, [itemPath, asyncBehaviorIsEnabled, onChange, runPool, handleChangeIterateContext, makeIteratePath, hideError, updateValue, addToPool, getEventArgs, yieldAsyncProcess, defineAsyncProcess, hasError, setEventResult]);
   const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
+  const {
+    activeIndex,
+    activeIndexRef
+  } = wizardContext || {};
+  const activeIndexTmpRef = useRef(activeIndex);
+  useEffect(() => {
+    activeIndexTmpRef.current = activeIndex;
+  }, [activeIndex]);
+  useMemo(() => {
+    setMountedFieldStateDataContext(identifier, {
+      isPreMounted: true
+    });
+    if (typeof isVisible === 'boolean') {
+      setMountedFieldStateDataContext(identifier, {
+        isVisible
+      });
+    }
+  }, [setMountedFieldStateDataContext, identifier, isVisible]);
+  useEffect(() => {
+    if (typeof (activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current) === 'number') {
+      setMountedFieldStateDataContext(identifier, {
+        wasStepChange: false
+      });
+      return () => {
+        const wasStepChange = typeof activeIndex === 'number' && activeIndexRef.current !== activeIndexTmpRef.current;
+        setMountedFieldStateDataContext(identifier, {
+          wasStepChange
+        });
+      };
+    }
+  }, [activeIndex, activeIndexRef, identifier, setMountedFieldStateDataContext]);
   useEffect(() => {
     setMountedFieldStateDataContext(identifier, {
-      isMounted: true
+      isMounted: true,
+      isPreMounted: true
     });
     return () => {
       setMountedFieldStateDataContext(identifier, {
-        isMounted: false
+        isMounted: false,
+        isPreMounted: false
       });
+    };
+  }, [identifier, setMountedFieldStateDataContext]);
+  useEffect(() => {
+    return () => {
       setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
       setFieldErrorBoundary === null || setFieldErrorBoundary === void 0 ? void 0 : setFieldErrorBoundary(identifier, undefined);
       localErrorRef.current = undefined;
@@ -850,14 +921,23 @@ export default function useFieldProps(localeProps, {
     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 : clearedData);
   }, [dataContext.internalDataRef, (_dataContext$props3 = dataContext.props) === null || _dataContext$props3 === void 0 ? void 0 : _dataContext$props3.emptyData]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isEmptyData()) {
+      changedRef.current = false;
       hideError();
+      clearErrorState();
     }
-  }, [externalValue, hideError, isEmptyData]);
-  useUpdateEffect(() => {
+  }, [externalValue, clearErrorState, hideError, isEmptyData]);
+  const externalValueDidChangeRef = useRef(false);
+  useLayoutEffect(() => {
     if (valueRef.current !== externalValue) {
       valueRef.current = externalValue;
+      externalValueDidChangeRef.current = true;
+    }
+  }, [externalValue]);
+  useEffect(() => {
+    if (externalValueDidChangeRef.current) {
+      externalValueDidChangeRef.current = false;
       validateValue();
       forceUpdate();
     }
@@ -883,7 +963,8 @@ export default function useFieldProps(localeProps, {
       warn(`Using defaultValue="${defaultValue}" prop inside Iterate is not supported yet`);
     }
   }, [defaultValue, itemPath, valueProp]);
-  useEffect(() => {
+  const tmpValueRef = useRef({});
+  useLayoutEffect(() => {
     if (hasPath) {
       let value = valueProp;
       const hasValue = pointer.has(dataContext.data, identifier) || identifier === '/';
@@ -903,11 +984,19 @@ export default function useFieldProps(localeProps, {
         defaultValueRef.current = undefined;
       }
       if (!hasValue || value !== existingValue && valueRef.current !== existingValue) {
+        if (identifier in tmpValueRef.current && tmpValueRef.current[identifier] === value) {
+          return;
+        }
+        const transformedValue = transformers.current.transformOut(value, transformers.current.provideAdditionalArgs(value));
+        if (transformedValue !== value) {
+          tmpValueRef.current[identifier] = value;
+          value = transformedValue;
+        }
         updateDataValueDataContext === null || updateDataValueDataContext === void 0 ? void 0 : updateDataValueDataContext(identifier, value);
         validateDataDataContext === null || validateDataDataContext === void 0 ? void 0 : validateDataDataContext();
       }
     }
-  }, [dataContext.data, dataContext.id, defaultValue, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
+  }, [dataContext.data, dataContext.id, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
   useEffect(() => {
     if (showAllErrors || showBoundaryErrors) {
       if (fieldStateRef.current !== 'validating') {