@dnb/eufemia 10.56.0 → 10.57.0

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

@@ -75,6 +75,7 @@ function useFieldProps(localProps) {
     onChange,
     onBlurValidator,
     validator,
+    onChangeValidator = validator,
     exportValidators,
     schema,
     validateInitially,
@@ -158,6 +159,7 @@ 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
@@ -243,10 +245,10 @@ function useFieldProps(localProps) {
     return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
   }, [dataContextErrors, identifier, path]);
   const contextErrorRef = (0, _react.useRef)(dataContextError);
-  const onChangeValidatorRef = (0, _react.useRef)(validator);
+  const onChangeValidatorRef = (0, _react.useRef)(onChangeValidator);
   (0, _useUpdateEffect.default)(() => {
-    onChangeValidatorRef.current = validator;
-  }, [validator]);
+    onChangeValidatorRef.current = onChangeValidator;
+  }, [onChangeValidator]);
   const onBlurValidatorRef = (0, _react.useRef)(onBlurValidator);
   (0, _useUpdateEffect.default)(() => {
     onBlurValidatorRef.current = onBlurValidator;
@@ -279,7 +281,7 @@ function useFieldProps(localProps) {
     }
   }
   const eventPool = (0, _react.useRef)({
-    validator: null,
+    onChangeValidator: null,
     onBlurValidator: null,
     onChangeContext: null,
     onChangeLocal: null
@@ -295,7 +297,7 @@ function useFieldProps(localProps) {
   const runPool = (0, _react.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 {
@@ -303,7 +305,6 @@ function useFieldProps(localProps) {
         runAsync
       } = eventPool.current[key] || {};
       if (fn) {
-        eventPool.current[key].pending = true;
         eventPool.current[key] = null;
         if (runAsync) {
           await fn();
@@ -318,10 +319,11 @@ function useFieldProps(localProps) {
   const setFieldState = (0, _react.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 = (0, _react.useCallback)(() => {
     if (revealErrorRef.current === false && validateInitially === false) {
       revealErrorRef.current = undefined;
@@ -342,20 +344,32 @@ function useFieldProps(localProps) {
       setVisibleErrorDataContext === null || setVisibleErrorDataContext === void 0 ? void 0 : setVisibleErrorDataContext(identifier, false);
     }
   }, [identifier, setVisibleErrorBoundary, setVisibleErrorDataContext, showFieldErrorFieldBlock]);
-  const getErrorMessages = (0, _react.useCallback)(() => {
+  const errorMessagesCacheRef = (0, _react.useRef)({
+    errorMessages: null,
+    extendedErrorMessages: null
+  });
+  const combinedErrorMessages = (0, _react.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 (0, _utils.extendErrorMessagesWithTranslationMessages)((0, _utils.overwriteErrorMessagesWithGivenAjvKeys)(messages), translationRef.current);
+    const extendedErrorMessages = (0, _utils.extendErrorMessagesWithTranslationMessages)((0, _utils.overwriteErrorMessagesWithGivenAjvKeys)(messages), translationRef.current);
+    errorMessagesCacheRef.current = {
+      errorMessages,
+      extendedErrorMessages
+    };
+    return extendedErrorMessages;
   }, [contextErrorMessages, errorMessages, identifier]);
   const prepareError = (0, _react.useCallback)(error => {
     if (error instanceof _utils.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;
           }
@@ -364,13 +378,13 @@ 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;
@@ -390,7 +404,7 @@ function useFieldProps(localProps) {
       return prepare(error);
     }
     return error;
-  }, [getErrorMessages, formatMessage]);
+  }, [combinedErrorMessages, formatMessage]);
   contextErrorRef.current = (0, _react.useMemo)(() => {
     if (!dataContextError) {
       return undefined;
@@ -411,11 +425,9 @@ function useFieldProps(localProps) {
   }, [errorProp]);
   const connectWithPathListenerRef = (0, _react.useRef)(async () => {
     if (localErrorRef.current || validateUnchanged || continuousValidation) {
-      if (onChangeValidatorRef.current) {
-        runOnChangeValidator();
-      }
+      runOnChangeValidator();
     }
-    if (localErrorRef.current && onBlurValidatorRef.current) {
+    if (localErrorRef.current) {
       runOnBlurValidator();
     }
   });
@@ -425,9 +437,8 @@ function useFieldProps(localProps) {
   const exportValidatorsRef = (0, _react.useRef)(exportValidators);
   exportValidatorsRef.current = exportValidators;
   const additionalArgs = (0, _react.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);
@@ -437,7 +448,7 @@ function useFieldProps(localProps) {
       }
     });
     return args;
-  }, [getErrorMessages, getValueByPath, setFieldEventListener]);
+  }, [combinedErrorMessages, getValueByPath, setFieldEventListener]);
   const callStackRef = (0, _react.useRef)([]);
   const hasBeenCalledRef = (0, _react.useCallback)(validator => {
     const result = callStackRef.current.includes(validator);
@@ -515,7 +526,7 @@ 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',
@@ -524,7 +535,7 @@ 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 = (0, _react.useCallback)(() => {
     var _schemaValidatorRef$c;
     persistErrorState('wipe', undefined);
@@ -586,7 +597,7 @@ function useFieldProps(localProps) {
       return;
     }
     if ((0, _isAsync.isAsync)(onChangeValidatorRef.current)) {
-      defineAsyncProcess('validator');
+      defineAsyncProcess('onChangeValidator');
       setFieldState('validating');
       hideError();
     }
@@ -674,6 +685,9 @@ function useFieldProps(localProps) {
     revealOnBlurValidatorResult({
       result
     });
+    return {
+      result
+    };
   }, [asyncBehaviorIsEnabled, callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
   const runOnBlurValidator = (0, _react.useCallback)(async () => {
     if (!onBlurValidatorRef.current) {
@@ -745,7 +759,7 @@ function useFieldProps(localProps) {
       if (onBlurValidatorRef.current && validateInitially && !changedRef.current) {
         const {
           result
-        } = await callOnBlurValidator();
+        } = await startOnBlurValidatorProcess();
         if (result instanceof Error) {
           initiator = 'onBlurValidator';
           throw result;
@@ -760,7 +774,7 @@ 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 = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -892,7 +906,7 @@ function useFieldProps(localProps) {
       await yieldAsyncProcess({
         name: 'onChangeContext',
         waitFor: [{
-          processName: 'validator',
+          processName: 'onChangeValidator',
           withStates: ['validating', 'error'],
           hasValue: valueRef.current
         }, {
@@ -931,7 +945,7 @@ function useFieldProps(localProps) {
     if (itemPath) {
       handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(itemPath, ''), contextValue);
     }
-    addToPool('validator', validateValue, (0, _isAsync.isAsync)(onChangeValidatorRef.current));
+    addToPool('onChangeValidator', validateValue, (0, _isAsync.isAsync)(onChangeValidatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, (0, _isAsync.isAsync)(onChangeContext));
     await runPool(() => {
       handleError();
@@ -969,7 +983,7 @@ function useFieldProps(localProps) {
         await yieldAsyncProcess({
           name: 'onChangeLocal',
           waitFor: [{
-            processName: 'validator',
+            processName: 'onChangeValidator',
             withStates: ['validating', 'error'],
             hasValue: args[0]
           }, {
@@ -1237,7 +1251,7 @@ function useFieldProps(localProps) {
     if (hasError()) {
       return;
     }
-    addToPool('validator', startOnChangeValidatorValidation, (0, _isAsync.isAsync)(onChangeValidatorRef.current));
+    addToPool('onChangeValidator', startOnChangeValidatorValidation, (0, _isAsync.isAsync)(onChangeValidatorRef.current));
     addToPool('onBlurValidator', startOnBlurValidatorProcess, (0, _isAsync.isAsync)(onBlurValidatorRef.current));
     await runPool();
   }, [addToPool, startOnBlurValidatorProcess, hasError, runPool, startOnChangeValidatorValidation]);
@@ -1246,21 +1260,21 @@ function useFieldProps(localProps) {
   }, [identifier, onSubmitHandler, setFieldEventListener]);
   (0, _react.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,
@@ -1273,7 +1287,7 @@ function useFieldProps(localProps) {
         }
       };
     }
-  }, [errorProp, identifier, inFieldBlock, info, mountedFieldsRefFieldBlock, setFieldStateFieldBlock, warning]);
+  }, [errorProp, identifier, inFieldBlock, info, mountedFieldsRefFieldBlock, setBlockRecord, warning]);
   const infoRef = (0, _react.useRef)(info);
   const warningRef = (0, _react.useRef)(warning);
   (0, _useUpdateEffect.default)(() => {