@dnb/eufemia 10.53.0 → 10.54.0

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

@@ -5,9 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 React, { useRef, useEffect, useContext, useCallback, useMemo, useReducer } from 'react';
 import pointer from '../utils/json-pointer';
-import { errorChanged } from '../utils';
-import { ajvErrorsToOneFormError } from '../utils/ajv';
-import { FormError } from '../types';
+import { ajvErrorsToOneFormError, errorChanged, overwriteErrorMessagesWithGivenAjvKeys, extendErrorMessagesWithTranslationMessages, FormError } from '../utils';
 import { Context as DataContext } from '../DataContext';
 import { clearedData } from '../DataContext/Provider/Provider';
 import FieldProviderContext from '../Field/Provider/FieldProviderContext';
@@ -35,7 +33,7 @@ export default function useFieldProps(localProps, {
   omitMultiplePathWarning = false,
   forceUpdateWhenContextDataIsSet = false
 } = {}) {
-  var _dataContext$props, _transformers$current, _dataContext$ajvInsta, _localErrorRef$curren, _ref, _dataContext$props3, _props$path, _props$autoComplete;
+  var _dataContext$props, _transformers$current, _localErrorRef$curren, _ref, _prepareError, _dataContext$props3, _props$path, _props$autoComplete;
   const {
     extend
   } = useContext(FieldProviderContext);
@@ -101,6 +99,11 @@ export default function useFieldProps(localProps, {
     isVisible
   } = useContext(VisibilityContext) || {};
   const translation = useTranslation();
+  const {
+    formatMessage
+  } = translation;
+  const translationRef = useRef(translation);
+  translationRef.current = translation;
   const transformers = useRef({
     transformIn,
     transformOut,
@@ -127,6 +130,7 @@ export default function useFieldProps(localProps, {
     errors: dataContextErrors,
     showAllErrors,
     contextErrorMessages,
+    fieldDisplayValueRef,
     existingFieldsRef
   } = dataContext || {};
   const onChangeContext = dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props = dataContext.props) === null || _dataContext$props === void 0 ? void 0 : _dataContext$props.onChange;
@@ -156,7 +160,9 @@ export default function useFieldProps(localProps, {
   const {
     path,
     identifier,
-    makeIteratePath
+    makeIteratePath,
+    joinPath,
+    cleanPath
   } = usePath({
     id,
     path: pathProp,
@@ -180,28 +186,38 @@ export default function useFieldProps(localProps, {
     if (typeof requiredProp !== 'undefined') {
       return requiredProp;
     }
-    const paths = identifier.split('/');
-    if (paths.length > 0 && (schema || dataContext !== null && dataContext !== void 0 && dataContext.schema)) {
-      const requiredList = [schema === null || schema === void 0 ? void 0 : schema['required']];
-      if (paths.length > 1) {
-        const schema = dataContext.schema;
-        const schemaPath = paths.slice(0, -1).join('/properties/');
-        const schemaPart = pointer.has(schema, schemaPath) ? pointer.get(schema, schemaPath) : schema;
-        requiredList.push(schemaPart === null || schemaPart === void 0 ? void 0 : schemaPart['required']);
-      }
-      if (sectionPath) {
-        paths.push(sectionPath.substring(1));
-      }
-      const collected = requiredList.flatMap(v => v).filter(Boolean);
-      if (paths.filter(Boolean).some(p => collected.some(c => c.includes(p)))) {
-        return true;
+    if (schema || dataContext !== null && dataContext !== void 0 && dataContext.schema) {
+      const paths = identifier.split('/');
+      if (paths.length > 0) {
+        const requiredInSchema = [schema === null || schema === void 0 ? void 0 : schema['required']];
+        if (paths.length > 1) {
+          const schema = dataContext.schema;
+          const pathWithoutLast = paths.slice(0, -1).join('/properties/');
+          const schemaPart = pointer.has(schema, pathWithoutLast) ? pointer.get(schema, pathWithoutLast) : schema;
+          const requiredSchemaList = schemaPart === null || schemaPart === void 0 ? void 0 : schemaPart['required'];
+          if (Array.isArray(requiredSchemaList)) {
+            const rootPath = pathWithoutLast.replace(/properties\//g, '');
+            const requiredList = requiredSchemaList.map(path => {
+              path = cleanPath('/' + path);
+              return sectionPath && path.startsWith(sectionPath) ? path : joinPath([sectionPath || rootPath, path]);
+            });
+            requiredInSchema.push(requiredList);
+          }
+        }
+        const collected = requiredInSchema.flatMap(value => value).filter(Boolean);
+        if (collected.filter(Boolean).some(path => {
+          path = cleanPath('/' + path);
+          return identifier === path || sectionPath === path;
+        })) {
+          return true;
+        }
       }
     }
-  }, [requiredProp, identifier, schema, dataContext.schema, sectionPath]);
+  }, [cleanPath, dataContext.schema, identifier, joinPath, requiredProp, schema, sectionPath]);
   const revealErrorRef = useRef(validateInitially !== null && validateInitially !== void 0 ? validateInitially : Boolean(errorProp));
   const errorMethodRef = useRef({});
   const localErrorRef = useRef();
-  const hasLocalErrorRef = useRef(false);
+  const localErrorInitiatorRef = useRef();
   const dataContextError = useMemo(() => {
     return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
   }, [dataContextErrors, identifier, path]);
@@ -214,13 +230,11 @@ export default function useFieldProps(localProps, {
   useUpdateEffect(() => {
     onBlurValidatorRef.current = onBlurValidator;
   }, [onBlurValidator]);
-  const schemaValidatorRef = useRef(schema ? (_dataContext$ajvInsta = dataContext.ajvInstance) === null || _dataContext$ajvInsta === void 0 ? void 0 : _dataContext$ajvInsta.compile(schema) : undefined);
-  const errorMessagesRef = useRef(null);
-  errorMessagesRef.current = useMemo(() => {
-    return _objectSpread({
-      required: translation.Field.errorRequired
-    }, errorMessages);
-  }, [errorMessages, translation.Field.errorRequired]);
+  const schemaValidatorRef = useRef();
+  if (!schemaValidatorRef.current && schema) {
+    var _dataContext$ajvInsta;
+    schemaValidatorRef.current = (_dataContext$ajvInsta = dataContext.ajvInstance) === null || _dataContext$ajvInsta === void 0 ? void 0 : _dataContext$ajvInsta.compile(schema);
+  }
   const asyncBehaviorIsEnabled = useMemo(() => {
     return isAsync(onChange) || isAsync(onChangeContext);
   }, [onChangeContext, onChange]);
@@ -281,7 +295,7 @@ export default function useFieldProps(localProps, {
   const fieldStateRef = useRef();
   const setFieldState = useCallback(state => {
     fieldStateRef.current = state;
-    setFieldStateDataContext(identifier, resolveValidatingState(state));
+    setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, resolveValidatingState(state));
     if (!validateInitially) {
       forceUpdate();
     }
@@ -306,27 +320,54 @@ export default function useFieldProps(localProps, {
       setVisibleErrorDataContext === null || setVisibleErrorDataContext === void 0 ? void 0 : setVisibleErrorDataContext(identifier, false);
     }
   }, [identifier, setVisibleErrorBoundary, setVisibleErrorDataContext, showFieldErrorFieldBlock]);
+  const getErrorMessages = useCallback(() => {
+    const messages = _objectSpread(_objectSpread(_objectSpread({}, contextErrorMessages), contextErrorMessages === null || contextErrorMessages === void 0 ? void 0 : contextErrorMessages[identifier]), errorMessages);
+    return extendErrorMessagesWithTranslationMessages(overwriteErrorMessagesWithGivenAjvKeys(messages), translationRef.current);
+  }, [contextErrorMessages, errorMessages, identifier]);
   const prepareError = useCallback(error => {
     if (error instanceof FormError) {
-      let message = error.message;
-      const {
-        validationRule
-      } = error;
-      if (typeof validationRule === 'string') {
-        var _errorMessagesRef$cur;
-        const fieldMessage = (_errorMessagesRef$cur = errorMessagesRef.current) === null || _errorMessagesRef$cur === void 0 ? void 0 : _errorMessagesRef$cur[validationRule];
-        if (fieldMessage) {
-          message = fieldMessage;
+      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];
+          if (ajvMessage) {
+            message = ajvMessage;
+          }
+        }
+        const {
+          validationRule
+        } = error;
+        if (typeof validationRule === 'string') {
+          const ajvMessage = errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages[validationRule];
+          if (ajvMessage) {
+            message = ajvMessage;
+          }
+        }
+        if (errorMessages[message]) {
+          message = errorMessages[message];
+          if (error.messageValues) {
+            message = Object.entries(error.messageValues || {}).reduce((msg, [key, value]) => {
+              return msg.replace(`{${key}}`, value);
+            }, message);
+          }
+        } else if (message.includes('.')) {
+          message = formatMessage(message, error.messageValues);
         }
+        error.message = message;
+        return error;
+      };
+      if (Array.isArray(error.errors)) {
+        error.errors = error.errors.map(prepare);
+        return error;
       }
-      const messageHasValues = Object.entries(error.messageValues || {}).reduce((message, [key, value]) => {
-        return message.replace(`{${key}}`, value);
-      }, message);
-      error.message = messageHasValues;
-      return error;
+      return prepare(error);
     }
     return error;
-  }, []);
+  }, [getErrorMessages, formatMessage]);
   contextErrorRef.current = useMemo(() => {
     if (!dataContextError) {
       return undefined;
@@ -336,7 +377,10 @@ export default function useFieldProps(localProps, {
       return error;
     }
   }, [dataContextError, prepareError]);
-  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;
+  if (((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['ajvKeyword']) === 'type') {
+    revealErrorRef.current = true;
+  }
+  const error = revealErrorRef.current ? (_ref = (_prepareError = prepareError(errorProp)) !== null && _prepareError !== void 0 ? _prepareError : localErrorRef.current) !== null && _ref !== void 0 ? _ref : contextErrorRef.current : undefined;
   const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
   const hasError = useCallback(() => {
     var _ref2;
@@ -358,7 +402,7 @@ export default function useFieldProps(localProps, {
   const exportValidatorsRef = useRef(exportValidators);
   exportValidatorsRef.current = exportValidators;
   const additionalArgs = useMemo(() => {
-    const errorMessages = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
+    const errorMessages = getErrorMessages();
     const args = _objectSpread(_objectSpread({}, errorMessages), {}, {
       errorMessages,
       validators: exportValidatorsRef.current,
@@ -370,7 +414,7 @@ export default function useFieldProps(localProps, {
       }
     });
     return args;
-  }, [contextErrorMessages, getValueByPath, setFieldEventListener]);
+  }, [getErrorMessages, getValueByPath, setFieldEventListener]);
   const callStackRef = useRef([]);
   const hasBeenCalledRef = useCallback(validator => {
     const result = callStackRef.current.includes(validator);
@@ -426,11 +470,14 @@ export default function useFieldProps(localProps, {
     }
   }, [additionalArgs, callValidatorFnAsync, hasBeenCalledRef]);
   const stateId = useId();
-  const persistErrorState = useCallback((method, errorArg = undefined) => {
+  const persistErrorState = useCallback((method, initiator, errorArg = undefined) => {
     const error = prepareError(errorArg);
     if (!errorChanged(error, localErrorRef.current)) {
       return;
     }
+    if (initiator !== 'dataContextError') {
+      localErrorInitiatorRef.current = initiator;
+    }
     if (method === 'wipe') {
       errorMethodRef.current = {};
     } else {
@@ -442,7 +489,6 @@ 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);
-    setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, error ? 'error' : undefined);
     setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
       stateId,
       identifier,
@@ -450,11 +496,16 @@ export default function useFieldProps(localProps, {
       content: error,
       showInitially: Boolean(inFieldBlock && validateInitially)
     });
+    setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, error ? 'error' : undefined);
     forceUpdate();
-  }, [prepareError, setFieldErrorDataContext, identifier, setFieldErrorBoundary, setFieldStateDataContext, setFieldStateFieldBlock, stateId, inFieldBlock, validateInitially]);
+  }, [identifier, inFieldBlock, prepareError, setFieldErrorBoundary, setFieldErrorDataContext, setFieldStateDataContext, setFieldStateFieldBlock, stateId, validateInitially]);
   const clearErrorState = useCallback(() => {
-    persistErrorState('wipe');
-    hasLocalErrorRef.current = false;
+    var _schemaValidatorRef$c;
+    persistErrorState('wipe', undefined);
+    localErrorInitiatorRef.current = undefined;
+    if (Array.isArray((_schemaValidatorRef$c = schemaValidatorRef.current) === null || _schemaValidatorRef$c === void 0 ? void 0 : _schemaValidatorRef$c.errors)) {
+      schemaValidatorRef.current.errors = [];
+    }
   }, [persistErrorState]);
   const removeError = useCallback(() => {
     changedRef.current = false;
@@ -471,7 +522,7 @@ export default function useFieldProps(localProps, {
   }) => {
     const runAsync = isAsync(onChangeValidatorRef.current);
     if (unchangedValue) {
-      persistErrorState('gracefully', result);
+      persistErrorState('gracefully', 'onChangeValidator', result);
       if (validateInitially && !changedRef.current || validateUnchanged || continuousValidation || runAsync) {
         window.requestAnimationFrame(() => {
           revealError();
@@ -565,7 +616,7 @@ export default function useFieldProps(localProps, {
   const revealOnBlurValidatorResult = useCallback(({
     result
   }) => {
-    persistErrorState('gracefully', result);
+    persistErrorState('gracefully', 'onBlurValidator', result);
     if (isAsync(onBlurValidatorRef.current)) {
       defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
@@ -578,6 +629,9 @@ export default function useFieldProps(localProps, {
     if (typeof onBlurValidatorRef.current !== 'function') {
       return;
     }
+    if ((localErrorInitiatorRef.current === 'required' || localErrorInitiatorRef.current === 'schema') && !asyncBehaviorIsEnabled && !isAsync(onChangeValidatorRef.current)) {
+      return;
+    }
     if (isAsync(onBlurValidatorRef.current)) {
       defineAsyncProcess('onBlurValidator');
       setFieldState('validating');
@@ -590,7 +644,7 @@ export default function useFieldProps(localProps, {
     revealOnBlurValidatorResult({
       result
     });
-  }, [callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
+  }, [asyncBehaviorIsEnabled, callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
   const runOnBlurValidator = useCallback(async () => {
     if (!onBlurValidatorRef.current) {
       return;
@@ -630,27 +684,31 @@ export default function useFieldProps(localProps, {
     const value = valueRef.current;
     changeEventResultRef.current = null;
     validatedValue.current = null;
+    let initiator = null;
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
         required: requiredProp !== null && requiredProp !== void 0 ? requiredProp : required,
         isChanged: changedRef.current,
-        error: new FormError('The value is required', {
-          validationRule: 'required'
-        })
+        error: new FormError('Field.errorRequired')
       });
       if (requiredError instanceof Error) {
+        initiator = 'required';
         throw requiredError;
       }
-      if (schemaValidatorRef.current && value !== undefined && !schemaValidatorRef.current(value) && !prioritizeContextSchema) {
-        const error = ajvErrorsToOneFormError(schemaValidatorRef.current.errors, valueRef.current);
-        throw error;
+      if (value !== undefined && !prioritizeContextSchema && typeof schemaValidatorRef.current === 'function') {
+        if (!schemaValidatorRef.current(value)) {
+          const error = ajvErrorsToOneFormError(schemaValidatorRef.current.errors, value);
+          initiator = 'schema';
+          throw error;
+        }
       }
       if (onChangeValidatorRef.current && (changedRef.current || validateInitially || validateUnchanged)) {
         const {
           result
         } = await startOnChangeValidatorValidation();
         if (result instanceof Error) {
+          initiator = 'onChangeValidator';
           throw result;
         }
       }
@@ -659,6 +717,7 @@ export default function useFieldProps(localProps, {
           result
         } = await callOnBlurValidator();
         if (result instanceof Error) {
+          initiator = 'onBlurValidator';
           throw result;
         }
       }
@@ -668,11 +727,10 @@ export default function useFieldProps(localProps, {
       validatedValue.current = value;
     } catch (error) {
       if (isProcessActive()) {
-        hasLocalErrorRef.current = true;
-        persistErrorState('weak', error);
+        persistErrorState('weak', initiator, error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, validateUnchanged, startOnChangeValidatorValidation, callOnBlurValidator, persistErrorState]);
+  }, [callOnBlurValidator, clearErrorState, disabled, emptyValue, hideError, persistErrorState, prioritizeContextSchema, required, requiredProp, setFieldState, startOnChangeValidatorValidation, startProcess, validateInitially, validateUnchanged]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -759,7 +817,7 @@ export default function useFieldProps(localProps, {
       if ((result === null || result === void 0 ? void 0 : result.error) === null) {
         removeError();
       } else {
-        persistErrorState('gracefully', result.error);
+        persistErrorState('gracefully', 'onChangeValidator', result.error);
         revealError();
       }
     }
@@ -849,6 +907,12 @@ export default function useFieldProps(localProps, {
   const setChanged = state => {
     changedRef.current = state;
   };
+  const setDisplayValue = useCallback((path, content) => {
+    if (!path || !(fieldDisplayValueRef !== null && fieldDisplayValueRef !== void 0 && fieldDisplayValueRef.current)) {
+      return;
+    }
+    fieldDisplayValueRef.current[path] = valueRef.current === emptyValue ? undefined : content;
+  }, [emptyValue, fieldDisplayValueRef]);
   const handleChange = useCallback(async (argFromInput, additionalArgs = undefined) => {
     const currentValue = valueRef.current;
     const fromInput = transformers.current.fromInput(argFromInput);
@@ -995,10 +1059,10 @@ export default function useFieldProps(localProps, {
     }
   }, [externalValue]);
   useEffect(() => {
-    if (!hasLocalErrorRef.current) {
+    if (!localErrorInitiatorRef.current) {
       const error = prepareError(dataContextError);
       if (error) {
-        persistErrorState('weak', error);
+        persistErrorState('weak', 'dataContextError', error);
         if (validateInitially) {
           handleError();
         }
@@ -1233,7 +1297,7 @@ export default function useFieldProps(localProps, {
   });
   return _objectSpread(_objectSpread(_objectSpread({}, props), fieldBlockProps), {}, {
     name: props.name || ((_props$path = props.path) === null || _props$path === void 0 ? void 0 : _props$path.replace('/', '')) || id,
-    autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : dataContext.autoComplete === true ? 'on' : undefined,
+    autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : typeof dataContext.autoComplete === 'boolean' ? dataContext.autoComplete ? 'on' : 'off' : undefined,
     id,
     value: transformers.current.toInput(valueRef.current),
     hasError: hasVisibleError,
@@ -1246,6 +1310,7 @@ export default function useFieldProps(localProps, {
     handleChange,
     updateValue,
     setChanged,
+    setDisplayValue,
     forceUpdate,
     dataContext
   });