@dnb/eufemia 10.42.0 → 10.44.0

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

@@ -11,6 +11,7 @@ var _utils = require("../utils");
 var _ajv = require("../utils/ajv");
 var _types = require("../types");
 var _DataContext = require("../DataContext");
+var _Provider = require("../DataContext/Provider/Provider");
 var _FieldPropsContext = _interopRequireDefault(require("../Form/FieldProps/FieldPropsContext"));
 var _componentHelper = require("../../../shared/component-helper");
 var _useId = _interopRequireDefault(require("../../../shared/helpers/useId"));
@@ -76,6 +77,7 @@ function useFieldProps(localeProps) {
     fromInput = value => value,
     toEvent = value => value,
     transformValue = value => value,
+    transformAdditionalArgs = additionalArgs => additionalArgs,
     fromExternal = value => value,
     validateRequired = (value, _ref) => {
       let {
@@ -101,6 +103,7 @@ function useFieldProps(localeProps) {
   const transformers = (0, _react.useRef)({
     transformIn,
     transformOut,
+    transformAdditionalArgs,
     toInput,
     fromInput,
     toEvent,
@@ -182,7 +185,7 @@ function useFieldProps(localeProps) {
       }
     }
   }, [sectionPath, dataContext.schema, identifier, requiredProp, schema]);
-  const showErrorRef = (0, _react.useRef)(Boolean(validateInitially || errorProp));
+  const revealErrorRef = (0, _react.useRef)(Boolean(validateInitially || errorProp));
   const errorMethodRef = (0, _react.useRef)({});
   const localErrorRef = (0, _react.useRef)();
   const hasLocalErrorRef = (0, _react.useRef)(false);
@@ -271,15 +274,17 @@ function useFieldProps(localeProps) {
       forceUpdate();
     }
   }, [setFieldStateDataContext, identifier, validateInitially]);
-  const showError = (0, _react.useCallback)(() => {
-    showErrorRef.current = true;
+  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);
     }
   }, [showFieldErrorFieldBlock, identifier, setHasVisibleErrorDataContext]);
   const hideError = (0, _react.useCallback)(() => {
-    showErrorRef.current = false;
+    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]);
@@ -297,11 +302,11 @@ function useFieldProps(localeProps) {
           message = fieldMessage;
         }
       }
-      const messageWithValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref2) => {
+      const messagehasValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref2) => {
         let [key, value] = _ref2;
         return message.replace(`{${key}}`, value);
       }, message);
-      error.message = messageWithValues;
+      error.message = messagehasValues;
       return error;
     }
     return error;
@@ -315,7 +320,7 @@ function useFieldProps(localeProps) {
       return error;
     }
   }, [dataContextError, prepareError]);
-  const error = showErrorRef.current || ((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['validationRule']) === 'type' ? (_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current : undefined;
+  const error = revealErrorRef.current || ((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['validationRule']) === 'type' ? (_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current : undefined;
   const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
   const hasError = (0, _react.useCallback)(() => {
     var _ref4;
@@ -371,7 +376,7 @@ function useFieldProps(localeProps) {
       persistErrorState('gracefully', result);
       if (continuousValidation || runAsync) {
         window.requestAnimationFrame(() => {
-          showError();
+          revealError();
           forceUpdate();
         });
       }
@@ -385,7 +390,7 @@ function useFieldProps(localeProps) {
       }
     }
     return result;
-  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, showError]);
+  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, revealError]);
   const callOnBlurValidator = (0, _react.useCallback)(async function () {
     let {
       valueOverride = null
@@ -405,9 +410,9 @@ function useFieldProps(localeProps) {
       defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
     }
-    showError();
+    revealError();
     forceUpdate();
-  }, [persistErrorState, defineAsyncProcess, setFieldState, showError]);
+  }, [persistErrorState, defineAsyncProcess, setFieldState, revealError]);
   const prioritizeContextSchema = (0, _react.useMemo)(() => {
     if (errorPrioritization) {
       const schemaPath = identifier.split('/').join('/properties/');
@@ -463,20 +468,25 @@ function useFieldProps(localeProps) {
   }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, callValidator, persistErrorState]);
   const handleError = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
-      showError();
+      revealError();
     } else {
       hideError();
     }
-  }, [continuousValidation, hideError, showError]);
-  const setHasFocus = (0, _react.useCallback)(async (hasFocus, valueOverride) => {
+  }, [continuousValidation, hideError, revealError]);
+  const setHasFocus = (0, _react.useCallback)(async (hasFocus, valueOverride, additionalArgs) => {
+    const getArgs = type => {
+      const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, type);
+      const transformedAdditionalArgs = transformers.current.transformAdditionalArgs(additionalArgs, value);
+      return typeof transformedAdditionalArgs !== 'undefined' ? [value, transformedAdditionalArgs] : [value];
+    };
     if (hasFocus) {
       hasFocusRef.current = true;
-      const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onFocus');
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
+      const args = getArgs('onFocus');
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus.apply(this, args);
     } else {
       hasFocusRef.current = false;
-      const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onBlur');
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
+      const args = getArgs('onBlur');
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur.apply(this, args);
       if (!changedRef.current && !validateUnchanged) {
         return;
       }
@@ -484,11 +494,11 @@ function useFieldProps(localeProps) {
         valueOverride
       }), (0, _isAsync.isAsync)(onBlurValidatorRef.current));
       await runPool(() => {
-        showError();
+        revealError();
         forceUpdate();
       });
     }
-  }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, showError, validateUnchanged]);
+  }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, revealError, validateUnchanged]);
   const yieldAsyncProcess = (0, _react.useCallback)(async _ref5 => {
     let {
       name,
@@ -500,10 +510,10 @@ function useFieldProps(localeProps) {
           let {
             processName,
             withStates,
-            withValue
+            hasValue
           } = _ref6;
-          const hasMatchingValue = withValue === validatedValue.current;
-          const result = (typeof withValue === 'undefined' ? false : !hasMatchingValue) || (processName ? processName === asyncProcessRef.current : true) && (withStates === null || withStates === void 0 ? void 0 : withStates.some(state => {
+          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;
           }));
           return result;
@@ -525,7 +535,7 @@ function useFieldProps(localeProps) {
     const result = changeEventResultRef.current;
     if (typeof (result === null || result === void 0 ? void 0 : result.error) !== 'undefined') {
       persistErrorState('gracefully', result.error);
-      showError();
+      revealError();
     }
     if (typeof (result === null || result === void 0 ? void 0 : result.warning) !== 'undefined') {
       warningRef.current = result.warning;
@@ -549,7 +559,7 @@ function useFieldProps(localeProps) {
     } else if (asyncBehaviorIsEnabled) {
       setFieldState('complete');
     }
-  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
+  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, revealError, yieldAsyncProcess]);
   const setEventResult = (0, _react.useCallback)(result => {
     if (result instanceof Error) {
       result = {
@@ -566,11 +576,11 @@ function useFieldProps(localeProps) {
         waitFor: [{
           processName: 'validator',
           withStates: ['validating', 'error'],
-          withValue: valueRef.current
+          hasValue: valueRef.current
         }, {
           processName: 'onBlurValidator',
           withStates: ['validating', 'error'],
-          withValue: valueRef.current
+          hasValue: valueRef.current
         }]
       });
     }
@@ -612,7 +622,7 @@ function useFieldProps(localeProps) {
     const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue));
     changedRef.current = true;
     if (itemPath) {
-      handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(), transformedValue);
+      handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(itemPath, ''), transformedValue);
     }
     if (asyncBehaviorIsEnabled) {
       hideError();
@@ -622,7 +632,8 @@ function useFieldProps(localeProps) {
     }
     const getArgs = () => {
       const value = transformers.current.toEvent(valueRef.current, 'onChange');
-      return typeof additionalArgs !== 'undefined' ? [value, additionalArgs] : [value];
+      const transformedAdditionalArgs = transformers.current.transformAdditionalArgs(additionalArgs, value);
+      return typeof transformedAdditionalArgs !== 'undefined' ? [value, transformedAdditionalArgs] : [value];
     };
     if ((0, _isAsync.isAsync)(onChange)) {
       addToPool('onChangeLocal', async () => {
@@ -632,15 +643,15 @@ function useFieldProps(localeProps) {
           waitFor: [{
             processName: 'validator',
             withStates: ['validating', 'error'],
-            withValue: args[0]
+            hasValue: args[0]
           }, {
             processName: 'onBlurValidator',
             withStates: ['validating', 'error'],
-            withValue: args[0]
+            hasValue: args[0]
           }, {
             processName: 'onChangeContext',
             withStates: ['pending', 'error'],
-            withValue: args[0]
+            hasValue: args[0]
           }]
         });
         defineAsyncProcess('onChangeLocal');
@@ -673,6 +684,11 @@ function useFieldProps(localeProps) {
     schemaValidatorRef.current = schema ? (_dataContext$ajvInsta2 = dataContext.ajvInstance) === null || _dataContext$ajvInsta2 === void 0 ? void 0 : _dataContext$ajvInsta2.compile(schema) : undefined;
     validateValue();
   }, [schema, validateValue]);
+  (0, _react.useEffect)(() => {
+    if (dataContext.data === _Provider.clearedData) {
+      hideError();
+    }
+  }, [dataContext.data, hideError]);
   (0, _useUpdateEffect.default)(() => {
     if (valueRef.current !== externalValue) {
       valueRef.current = externalValue;
@@ -721,11 +737,11 @@ function useFieldProps(localeProps) {
   (0, _react.useEffect)(() => {
     if (showAllErrors) {
       if (fieldStateRef.current !== 'validating') {
-        showError();
+        revealError();
         forceUpdate();
       }
     }
-  }, [showAllErrors, showError]);
+  }, [showAllErrors, revealError]);
   (0, _react.useEffect)(() => {
     if (dataContext.formState === 'pending' && (validatorRef.current || onBlurValidatorRef.current)) {
       hideError();