@dnb/eufemia 10.43.0 → 10.45.0

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

@@ -9,6 +9,7 @@ import { errorChanged } from '../utils';
 import { ajvErrorsToOneFormError } from '../utils/ajv';
 import { FormError } from '../types';
 import { Context as DataContext } from '../DataContext';
+import { clearedData } from '../DataContext/Provider/Provider';
 import FieldPropsContext from '../Form/FieldProps/FieldPropsContext';
 import { combineDescribedBy } from '../../../shared/component-helper';
 import useId from '../../../shared/helpers/useId';
@@ -16,7 +17,7 @@ import useUpdateEffect from '../../../shared/helpers/useUpdateEffect';
 import useMountEffect from '../../../shared/helpers/useMountEffect';
 import useUnmountEffect from '../../../shared/helpers/useUnmountEffect';
 import FieldBlockContext from '../FieldBlock/FieldBlockContext';
-import IterateElementContext from '../Iterate/IterateElementContext';
+import IterateElementContext from '../Iterate/IterateItemContext';
 import SectionContext from '../Form/Section/SectionContext';
 import FieldBoundaryContext from '../DataContext/FieldBoundary/FieldBoundaryContext';
 import useProcessManager from './useProcessManager';
@@ -60,6 +61,7 @@ export default function useFieldProps(localeProps, {
     fromInput = value => value,
     toEvent = value => value,
     transformValue = value => value,
+    transformAdditionalArgs = additionalArgs => additionalArgs,
     fromExternal = value => value,
     validateRequired = (value, {
       emptyValue,
@@ -77,13 +79,14 @@ export default function useFieldProps(localeProps, {
   const id = useId(props.id);
   const dataContext = useContext(DataContext);
   const fieldBlockContext = useContext(FieldBlockContext);
-  const iterateElementContext = useContext(IterateElementContext);
+  const iterateItemContext = useContext(IterateElementContext);
   const sectionContext = useContext(SectionContext);
   const fieldBoundaryContext = useContext(FieldBoundaryContext);
   const translation = useTranslation();
   const transformers = useRef({
     transformIn,
     transformOut,
+    transformAdditionalArgs,
     toInput,
     fromInput,
     toEvent,
@@ -114,13 +117,14 @@ export default function useFieldProps(localeProps, {
   } = fieldBlockContext !== null && fieldBlockContext !== void 0 ? fieldBlockContext : {};
   const {
     handleChange: handleChangeIterateContext
-  } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
+  } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
   const {
     path: sectionPath,
     errorPrioritization
   } = sectionContext !== null && sectionContext !== void 0 ? sectionContext : {};
   const {
-    setFieldError
+    setFieldError,
+    showBoundaryErrors
   } = fieldBoundaryContext !== null && fieldBoundaryContext !== void 0 ? fieldBoundaryContext : {};
   const hasPath = Boolean(pathProp);
   const {
@@ -165,7 +169,7 @@ export default function useFieldProps(localeProps, {
       }
     }
   }, [sectionPath, dataContext.schema, identifier, requiredProp, schema]);
-  const showErrorRef = useRef(Boolean(validateInitially || errorProp));
+  const revealErrorRef = useRef(Boolean(validateInitially || errorProp));
   const errorMethodRef = useRef({});
   const localErrorRef = useRef();
   const hasLocalErrorRef = useRef(false);
@@ -253,15 +257,17 @@ export default function useFieldProps(localeProps, {
       forceUpdate();
     }
   }, [setFieldStateDataContext, identifier, validateInitially]);
-  const showError = useCallback(() => {
-    showErrorRef.current = true;
+  const revealError = 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 = 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]);
@@ -296,7 +302,7 @@ export default 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' ? (_ref = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref !== void 0 ? _ref : contextErrorRef.current : undefined;
+  const error = revealErrorRef.current || ((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['validationRule']) === 'type' ? (_ref = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref !== void 0 ? _ref : contextErrorRef.current : undefined;
   const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
   const hasError = useCallback(() => {
     var _ref2;
@@ -351,7 +357,7 @@ export default function useFieldProps(localeProps, {
       persistErrorState('gracefully', result);
       if (continuousValidation || runAsync) {
         window.requestAnimationFrame(() => {
-          showError();
+          revealError();
           forceUpdate();
         });
       }
@@ -365,7 +371,7 @@ export default function useFieldProps(localeProps, {
       }
     }
     return result;
-  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, showError]);
+  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, revealError]);
   const callOnBlurValidator = useCallback(async ({
     valueOverride = null
   } = {}) => {
@@ -384,9 +390,9 @@ export default function useFieldProps(localeProps, {
       defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
     }
-    showError();
+    revealError();
     forceUpdate();
-  }, [persistErrorState, defineAsyncProcess, setFieldState, showError]);
+  }, [persistErrorState, defineAsyncProcess, setFieldState, revealError]);
   const prioritizeContextSchema = useMemo(() => {
     if (errorPrioritization) {
       const schemaPath = identifier.split('/').join('/properties/');
@@ -442,20 +448,25 @@ export default function useFieldProps(localeProps, {
   }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, callValidator, persistErrorState]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
-      showError();
+      revealError();
     } else {
       hideError();
     }
-  }, [continuousValidation, hideError, showError]);
-  const setHasFocus = useCallback(async (hasFocus, valueOverride) => {
+  }, [continuousValidation, hideError, revealError]);
+  const setHasFocus = 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;
       }
@@ -463,11 +474,11 @@ export default function useFieldProps(localeProps, {
         valueOverride
       }), isAsync(onBlurValidatorRef.current));
       await runPool(() => {
-        showError();
+        revealError();
         forceUpdate();
       });
     }
-  }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, showError, validateUnchanged]);
+  }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, revealError, validateUnchanged]);
   const yieldAsyncProcess = useCallback(async ({
     name,
     waitFor
@@ -502,7 +513,7 @@ export default 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;
@@ -526,7 +537,7 @@ export default function useFieldProps(localeProps, {
     } else if (asyncBehaviorIsEnabled) {
       setFieldState('complete');
     }
-  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
+  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, revealError, yieldAsyncProcess]);
   const setEventResult = useCallback(result => {
     if (result instanceof Error) {
       result = {
@@ -598,7 +609,8 @@ export default 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 (isAsync(onChange)) {
       addToPool('onChangeLocal', async () => {
@@ -649,6 +661,11 @@ export default 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]);
+  useEffect(() => {
+    if (dataContext.data === clearedData) {
+      hideError();
+    }
+  }, [dataContext.data, hideError]);
   useUpdateEffect(() => {
     if (valueRef.current !== externalValue) {
       valueRef.current = externalValue;
@@ -672,8 +689,8 @@ export default function useFieldProps(localeProps, {
   useEffect(() => {
     if (hasPath) {
       let value = valueProp;
-      const hasValue = pointer.has(dataContext.data, identifier);
-      const existingValue = hasValue ? pointer.get(dataContext.data, identifier) : undefined;
+      const hasValue = pointer.has(dataContext.data, identifier) || identifier === '/';
+      const existingValue = identifier === '/' ? dataContext.data : hasValue ? pointer.get(dataContext.data, identifier) : undefined;
       if (dataContext.id && !hasValue && typeof existingValue === 'undefined' && typeof value === 'undefined') {
         const sharedState = createSharedState(dataContext.id);
         const hasValue = pointer.has(sharedState.data, identifier);
@@ -695,13 +712,14 @@ export default function useFieldProps(localeProps, {
     }
   }, [dataContext.data, dataContext.id, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
   useEffect(() => {
-    if (showAllErrors) {
+    if (showAllErrors || showBoundaryErrors) {
       if (fieldStateRef.current !== 'validating') {
-        showError();
-        forceUpdate();
+        revealError();
       }
+    } else if (showBoundaryErrors === false) {
+      hideError();
     }
-  }, [showAllErrors, showError]);
+  }, [hideError, revealError, showAllErrors, showBoundaryErrors]);
   useEffect(() => {
     if (dataContext.formState === 'pending' && (validatorRef.current || onBlurValidatorRef.current)) {
       hideError();