@dnb/eufemia 10.56.0 → 10.57.0

package/extensions/forms/hooks/useFieldProps.js

@@ -64,6 +64,7 @@ export default function useFieldProps(localProps) {
     onChange,
     onBlurValidator,
     validator,
+    onChangeValidator = validator,
     exportValidators,
     schema,
     validateInitially,
@@ -147,6 +148,7 @@ export default function useFieldProps(localProps) {
   const disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : props.readOnly;
   const inFieldBlock = Boolean(fieldBlockContext && fieldBlockContext.disableStatusSummary !== true);
   const {
+    setBlockRecord,
     setFieldState: setFieldStateFieldBlock,
     showFieldError: showFieldErrorFieldBlock,
     mountedFieldsRef: mountedFieldsRefFieldBlock
@@ -232,10 +234,10 @@ export default function useFieldProps(localProps) {
     return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
   }, [dataContextErrors, identifier, path]);
   const contextErrorRef = useRef(dataContextError);
-  const onChangeValidatorRef = useRef(validator);
+  const onChangeValidatorRef = useRef(onChangeValidator);
   useUpdateEffect(() => {
-    onChangeValidatorRef.current = validator;
-  }, [validator]);
+    onChangeValidatorRef.current = onChangeValidator;
+  }, [onChangeValidator]);
   const onBlurValidatorRef = useRef(onBlurValidator);
   useUpdateEffect(() => {
     onBlurValidatorRef.current = onBlurValidator;
@@ -268,7 +270,7 @@ export default function useFieldProps(localProps) {
     }
   }
   const eventPool = useRef({
-    validator: null,
+    onChangeValidator: null,
     onBlurValidator: null,
     onChangeContext: null,
     onChangeLocal: null
@@ -284,7 +286,7 @@ export default function useFieldProps(localProps) {
   const runPool = useCallback(async function () {
     let cb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     for (const key in eventPool.current) {
-      if (!eventPool.current[key] || eventPool.current[key].pending) {
+      if (!eventPool.current[key]) {
         continue;
       }
       const {
@@ -292,7 +294,6 @@ export default function useFieldProps(localProps) {
         runAsync
       } = eventPool.current[key] || {};
       if (fn) {
-        eventPool.current[key].pending = true;
         eventPool.current[key] = null;
         if (runAsync) {
           await fn();
@@ -307,10 +308,11 @@ export default function useFieldProps(localProps) {
   const setFieldState = useCallback(state => {
     fieldStateRef.current = state;
     setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, resolveValidatingState(state));
+    setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock(identifier, resolveValidatingState(state));
     if (!validateInitially) {
       forceUpdate();
     }
-  }, [setFieldStateDataContext, identifier, validateInitially]);
+  }, [setFieldStateDataContext, identifier, setFieldStateFieldBlock, validateInitially]);
   const revealError = useCallback(() => {
     if (revealErrorRef.current === false && validateInitially === false) {
       revealErrorRef.current = undefined;
@@ -331,20 +333,32 @@ export default function useFieldProps(localProps) {
       setVisibleErrorDataContext === null || setVisibleErrorDataContext === void 0 ? void 0 : setVisibleErrorDataContext(identifier, false);
     }
   }, [identifier, setVisibleErrorBoundary, setVisibleErrorDataContext, showFieldErrorFieldBlock]);
-  const getErrorMessages = useCallback(() => {
+  const errorMessagesCacheRef = useRef({
+    errorMessages: null,
+    extendedErrorMessages: null
+  });
+  const combinedErrorMessages = useMemo(() => {
+    const cache = errorMessagesCacheRef.current;
+    if (errorMessages && cache.extendedErrorMessages && Object.values(cache.errorMessages || {}).join('') === Object.values(errorMessages || {}).join('')) {
+      return cache.extendedErrorMessages;
+    }
     const messages = _objectSpread(_objectSpread(_objectSpread({}, contextErrorMessages), contextErrorMessages === null || contextErrorMessages === void 0 ? void 0 : contextErrorMessages[identifier]), errorMessages);
-    return extendErrorMessagesWithTranslationMessages(overwriteErrorMessagesWithGivenAjvKeys(messages), translationRef.current);
+    const extendedErrorMessages = extendErrorMessagesWithTranslationMessages(overwriteErrorMessagesWithGivenAjvKeys(messages), translationRef.current);
+    errorMessagesCacheRef.current = {
+      errorMessages,
+      extendedErrorMessages
+    };
+    return extendedErrorMessages;
   }, [contextErrorMessages, errorMessages, identifier]);
   const prepareError = useCallback(error => {
     if (error instanceof FormError) {
       const prepare = error => {
         let message = error.message;
-        const errorMessages = getErrorMessages();
         const {
           ajvKeyword
         } = error;
         if (typeof ajvKeyword === 'string') {
-          const ajvMessage = errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages[ajvKeyword];
+          const ajvMessage = combinedErrorMessages === null || combinedErrorMessages === void 0 ? void 0 : combinedErrorMessages[ajvKeyword];
           if (ajvMessage) {
             message = ajvMessage;
           }
@@ -353,13 +367,13 @@ export default function useFieldProps(localProps) {
           validationRule
         } = error;
         if (typeof validationRule === 'string') {
-          const ajvMessage = errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages[validationRule];
+          const ajvMessage = combinedErrorMessages === null || combinedErrorMessages === void 0 ? void 0 : combinedErrorMessages[validationRule];
           if (ajvMessage) {
             message = ajvMessage;
           }
         }
-        if (errorMessages[message]) {
-          message = errorMessages[message];
+        if (combinedErrorMessages !== null && combinedErrorMessages !== void 0 && combinedErrorMessages[message]) {
+          message = combinedErrorMessages === null || combinedErrorMessages === void 0 ? void 0 : combinedErrorMessages[message];
           if (error.messageValues) {
             message = Object.entries(error.messageValues || {}).reduce((msg, _ref2) => {
               let [key, value] = _ref2;
@@ -379,7 +393,7 @@ export default function useFieldProps(localProps) {
       return prepare(error);
     }
     return error;
-  }, [getErrorMessages, formatMessage]);
+  }, [combinedErrorMessages, formatMessage]);
   contextErrorRef.current = useMemo(() => {
     if (!dataContextError) {
       return undefined;
@@ -400,11 +414,9 @@ export default function useFieldProps(localProps) {
   }, [errorProp]);
   const connectWithPathListenerRef = useRef(async () => {
     if (localErrorRef.current || validateUnchanged || continuousValidation) {
-      if (onChangeValidatorRef.current) {
-        runOnChangeValidator();
-      }
+      runOnChangeValidator();
     }
-    if (localErrorRef.current && onBlurValidatorRef.current) {
+    if (localErrorRef.current) {
       runOnBlurValidator();
     }
   });
@@ -414,9 +426,8 @@ export default function useFieldProps(localProps) {
   const exportValidatorsRef = useRef(exportValidators);
   exportValidatorsRef.current = exportValidators;
   const additionalArgs = useMemo(() => {
-    const errorMessages = getErrorMessages();
-    const args = _objectSpread(_objectSpread({}, errorMessages), {}, {
-      errorMessages,
+    const args = _objectSpread(_objectSpread({}, combinedErrorMessages), {}, {
+      errorMessages: combinedErrorMessages,
       validators: exportValidatorsRef.current,
       connectWithPath: path => {
         setFieldEventListener === null || setFieldEventListener === void 0 ? void 0 : setFieldEventListener(path, 'onPathChange', connectWithPathListenerRef.current);
@@ -426,7 +437,7 @@ export default function useFieldProps(localProps) {
       }
     });
     return args;
-  }, [getErrorMessages, getValueByPath, setFieldEventListener]);
+  }, [combinedErrorMessages, getValueByPath, setFieldEventListener]);
   const callStackRef = useRef([]);
   const hasBeenCalledRef = useCallback(validator => {
     const result = callStackRef.current.includes(validator);
@@ -504,7 +515,7 @@ export default function useFieldProps(localProps) {
     localErrorRef.current = error;
     setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, error);
     setFieldErrorBoundary === null || setFieldErrorBoundary === void 0 ? void 0 : setFieldErrorBoundary(identifier, error);
-    setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+    setBlockRecord === null || setBlockRecord === void 0 ? void 0 : setBlockRecord({
       stateId,
       identifier,
       type: 'error',
@@ -513,7 +524,7 @@ export default function useFieldProps(localProps) {
     });
     setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, error ? 'error' : undefined);
     forceUpdate();
-  }, [identifier, inFieldBlock, prepareError, setFieldErrorBoundary, setFieldErrorDataContext, setFieldStateDataContext, setFieldStateFieldBlock, stateId, validateInitially]);
+  }, [identifier, inFieldBlock, prepareError, setFieldErrorBoundary, setFieldErrorDataContext, setFieldStateDataContext, setBlockRecord, stateId, validateInitially]);
   const clearErrorState = useCallback(() => {
     var _schemaValidatorRef$c;
     persistErrorState('wipe', undefined);
@@ -575,7 +586,7 @@ export default function useFieldProps(localProps) {
       return;
     }
     if (isAsync(onChangeValidatorRef.current)) {
-      defineAsyncProcess('validator');
+      defineAsyncProcess('onChangeValidator');
       setFieldState('validating');
       hideError();
     }
@@ -663,6 +674,9 @@ export default function useFieldProps(localProps) {
     revealOnBlurValidatorResult({
       result
     });
+    return {
+      result
+    };
   }, [asyncBehaviorIsEnabled, callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
   const runOnBlurValidator = useCallback(async () => {
     if (!onBlurValidatorRef.current) {
@@ -734,7 +748,7 @@ export default function useFieldProps(localProps) {
       if (onBlurValidatorRef.current && validateInitially && !changedRef.current) {
         const {
           result
-        } = await callOnBlurValidator();
+        } = await startOnBlurValidatorProcess();
         if (result instanceof Error) {
           initiator = 'onBlurValidator';
           throw result;
@@ -749,7 +763,7 @@ export default function useFieldProps(localProps) {
         persistErrorState('weak', initiator, error);
       }
     }
-  }, [callOnBlurValidator, clearErrorState, disabled, emptyValue, hideError, persistErrorState, prioritizeContextSchema, required, requiredProp, setFieldState, startOnChangeValidatorValidation, startProcess, validateInitially, validateUnchanged]);
+  }, [clearErrorState, disabled, emptyValue, hideError, persistErrorState, prioritizeContextSchema, required, requiredProp, setFieldState, startOnBlurValidatorProcess, startOnChangeValidatorValidation, startProcess, validateInitially, validateUnchanged]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -881,7 +895,7 @@ export default function useFieldProps(localProps) {
       await yieldAsyncProcess({
         name: 'onChangeContext',
         waitFor: [{
-          processName: 'validator',
+          processName: 'onChangeValidator',
           withStates: ['validating', 'error'],
           hasValue: valueRef.current
         }, {
@@ -920,7 +934,7 @@ export default function useFieldProps(localProps) {
     if (itemPath) {
       handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(itemPath, ''), contextValue);
     }
-    addToPool('validator', validateValue, isAsync(onChangeValidatorRef.current));
+    addToPool('onChangeValidator', validateValue, isAsync(onChangeValidatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, isAsync(onChangeContext));
     await runPool(() => {
       handleError();
@@ -958,7 +972,7 @@ export default function useFieldProps(localProps) {
         await yieldAsyncProcess({
           name: 'onChangeLocal',
           waitFor: [{
-            processName: 'validator',
+            processName: 'onChangeValidator',
             withStates: ['validating', 'error'],
             hasValue: args[0]
           }, {
@@ -1226,7 +1240,7 @@ export default function useFieldProps(localProps) {
     if (hasError()) {
       return;
     }
-    addToPool('validator', startOnChangeValidatorValidation, isAsync(onChangeValidatorRef.current));
+    addToPool('onChangeValidator', startOnChangeValidatorValidation, isAsync(onChangeValidatorRef.current));
     addToPool('onBlurValidator', startOnBlurValidatorProcess, isAsync(onBlurValidatorRef.current));
     await runPool();
   }, [addToPool, startOnBlurValidatorProcess, hasError, runPool, startOnChangeValidatorValidation]);
@@ -1235,21 +1249,21 @@ export default function useFieldProps(localProps) {
   }, [identifier, onSubmitHandler, setFieldEventListener]);
   useEffect(() => {
     if (inFieldBlock) {
-      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+      setBlockRecord === null || setBlockRecord === void 0 ? void 0 : setBlockRecord({
         identifier,
         type: 'error',
         content: errorProp,
         showInitially: true,
         show: true
       });
-      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+      setBlockRecord === null || setBlockRecord === void 0 ? void 0 : setBlockRecord({
         identifier,
         type: 'warning',
         content: warning,
         showInitially: true,
         show: true
       });
-      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+      setBlockRecord === null || setBlockRecord === void 0 ? void 0 : setBlockRecord({
         identifier,
         type: 'info',
         content: info,
@@ -1262,7 +1276,7 @@ export default function useFieldProps(localProps) {
         }
       };
     }
-  }, [errorProp, identifier, inFieldBlock, info, mountedFieldsRefFieldBlock, setFieldStateFieldBlock, warning]);
+  }, [errorProp, identifier, inFieldBlock, info, mountedFieldsRefFieldBlock, setBlockRecord, warning]);
   const infoRef = useRef(info);
   const warningRef = useRef(warning);
   useUpdateEffect(() => {