@dnb/eufemia 10.53.0 → 10.54.1

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

@@ -8,8 +8,6 @@ exports.default = useFieldProps;
 var _react = _interopRequireWildcard(require("react"));
 var _jsonPointer = _interopRequireDefault(require("../utils/json-pointer"));
 var _utils = require("../utils");
-var _ajv = require("../utils/ajv");
-var _types = require("../types");
 var _DataContext = require("../DataContext");
 var _Provider = require("../DataContext/Provider/Provider");
 var _FieldProviderContext = _interopRequireDefault(require("../Field/Provider/FieldProviderContext"));
@@ -42,9 +40,9 @@ const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect
 function useFieldProps(localProps) {
   var _dataContext$props,
     _transformers$current,
-    _dataContext$ajvInsta,
     _localErrorRef$curren,
     _ref3,
+    _prepareError,
     _this = this,
     _dataContext$props3,
     _props$path,
@@ -121,6 +119,11 @@ function useFieldProps(localProps) {
     isVisible
   } = (0, _react.useContext)(_VisibilityContext.default) || {};
   const translation = (0, _useTranslation.default)();
+  const {
+    formatMessage
+  } = translation;
+  const translationRef = (0, _react.useRef)(translation);
+  translationRef.current = translation;
   const transformers = (0, _react.useRef)({
     transformIn,
     transformOut,
@@ -147,6 +150,7 @@ 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;
@@ -176,7 +180,9 @@ function useFieldProps(localProps) {
   const {
     path,
     identifier,
-    makeIteratePath
+    makeIteratePath,
+    joinPath,
+    cleanPath
   } = (0, _usePath.default)({
     id,
     path: pathProp,
@@ -200,28 +206,38 @@ 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 = _jsonPointer.default.has(schema, schemaPath) ? _jsonPointer.default.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 = _jsonPointer.default.has(schema, pathWithoutLast) ? _jsonPointer.default.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 = (0, _react.useRef)(validateInitially !== null && validateInitially !== void 0 ? validateInitially : Boolean(errorProp));
   const errorMethodRef = (0, _react.useRef)({});
   const localErrorRef = (0, _react.useRef)();
-  const hasLocalErrorRef = (0, _react.useRef)(false);
+  const localErrorInitiatorRef = (0, _react.useRef)();
   const dataContextError = (0, _react.useMemo)(() => {
     return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
   }, [dataContextErrors, identifier, path]);
@@ -234,13 +250,11 @@ function useFieldProps(localProps) {
   (0, _useUpdateEffect.default)(() => {
     onBlurValidatorRef.current = onBlurValidator;
   }, [onBlurValidator]);
-  const schemaValidatorRef = (0, _react.useRef)(schema ? (_dataContext$ajvInsta = dataContext.ajvInstance) === null || _dataContext$ajvInsta === void 0 ? void 0 : _dataContext$ajvInsta.compile(schema) : undefined);
-  const errorMessagesRef = (0, _react.useRef)(null);
-  errorMessagesRef.current = (0, _react.useMemo)(() => {
-    return _objectSpread({
-      required: translation.Field.errorRequired
-    }, errorMessages);
-  }, [errorMessages, translation.Field.errorRequired]);
+  const schemaValidatorRef = (0, _react.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 = (0, _react.useMemo)(() => {
     return (0, _isAsync.isAsync)(onChange) || (0, _isAsync.isAsync)(onChangeContext);
   }, [onChangeContext, onChange]);
@@ -302,7 +316,7 @@ function useFieldProps(localProps) {
   const fieldStateRef = (0, _react.useRef)();
   const setFieldState = (0, _react.useCallback)(state => {
     fieldStateRef.current = state;
-    setFieldStateDataContext(identifier, resolveValidatingState(state));
+    setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, resolveValidatingState(state));
     if (!validateInitially) {
       forceUpdate();
     }
@@ -327,28 +341,55 @@ function useFieldProps(localProps) {
       setVisibleErrorDataContext === null || setVisibleErrorDataContext === void 0 ? void 0 : setVisibleErrorDataContext(identifier, false);
     }
   }, [identifier, setVisibleErrorBoundary, setVisibleErrorDataContext, showFieldErrorFieldBlock]);
+  const getErrorMessages = (0, _react.useCallback)(() => {
+    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);
+  }, [contextErrorMessages, errorMessages, identifier]);
   const prepareError = (0, _react.useCallback)(error => {
-    if (error instanceof _types.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;
+    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];
+          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, _ref2) => {
+              let [key, value] = _ref2;
+              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, _ref2) => {
-        let [key, value] = _ref2;
-        return message.replace(`{${key}}`, value);
-      }, message);
-      error.message = messageHasValues;
-      return error;
+      return prepare(error);
     }
     return error;
-  }, []);
+  }, [getErrorMessages, formatMessage]);
   contextErrorRef.current = (0, _react.useMemo)(() => {
     if (!dataContextError) {
       return undefined;
@@ -358,7 +399,10 @@ 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' ? (_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : 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 ? (_ref3 = (_prepareError = prepareError(errorProp)) !== null && _prepareError !== void 0 ? _prepareError : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current : undefined;
   const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
   const hasError = (0, _react.useCallback)(() => {
     var _ref4;
@@ -380,7 +424,7 @@ function useFieldProps(localProps) {
   const exportValidatorsRef = (0, _react.useRef)(exportValidators);
   exportValidatorsRef.current = exportValidators;
   const additionalArgs = (0, _react.useMemo)(() => {
-    const errorMessages = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
+    const errorMessages = getErrorMessages();
     const args = _objectSpread(_objectSpread({}, errorMessages), {}, {
       errorMessages,
       validators: exportValidatorsRef.current,
@@ -392,7 +436,7 @@ function useFieldProps(localProps) {
       }
     });
     return args;
-  }, [contextErrorMessages, getValueByPath, setFieldEventListener]);
+  }, [getErrorMessages, getValueByPath, setFieldEventListener]);
   const callStackRef = (0, _react.useRef)([]);
   const hasBeenCalledRef = (0, _react.useCallback)(validator => {
     const result = callStackRef.current.includes(validator);
@@ -450,12 +494,15 @@ function useFieldProps(localProps) {
     }
   }, [additionalArgs, callValidatorFnAsync, hasBeenCalledRef]);
   const stateId = (0, _useId.default)();
-  const persistErrorState = (0, _react.useCallback)(function (method) {
-    let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+  const persistErrorState = (0, _react.useCallback)(function (method, initiator) {
+    let errorArg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
     const error = prepareError(errorArg);
     if (!(0, _utils.errorChanged)(error, localErrorRef.current)) {
       return;
     }
+    if (initiator !== 'dataContextError') {
+      localErrorInitiatorRef.current = initiator;
+    }
     if (method === 'wipe') {
       errorMethodRef.current = {};
     } else {
@@ -467,7 +514,6 @@ 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,
@@ -475,11 +521,16 @@ 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 = (0, _react.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 = (0, _react.useCallback)(() => {
     changedRef.current = false;
@@ -497,7 +548,7 @@ function useFieldProps(localProps) {
     } = _ref5;
     const runAsync = (0, _isAsync.isAsync)(onChangeValidatorRef.current);
     if (unchangedValue) {
-      persistErrorState('gracefully', result);
+      persistErrorState('gracefully', 'onChangeValidator', result);
       if (validateInitially && !changedRef.current || validateUnchanged || continuousValidation || runAsync) {
         window.requestAnimationFrame(() => {
           revealError();
@@ -593,7 +644,7 @@ function useFieldProps(localProps) {
     let {
       result
     } = _ref6;
-    persistErrorState('gracefully', result);
+    persistErrorState('gracefully', 'onBlurValidator', result);
     if ((0, _isAsync.isAsync)(onBlurValidatorRef.current)) {
       defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
@@ -607,6 +658,9 @@ function useFieldProps(localProps) {
     if (typeof onBlurValidatorRef.current !== 'function') {
       return;
     }
+    if ((localErrorInitiatorRef.current === 'required' || localErrorInitiatorRef.current === 'schema') && !asyncBehaviorIsEnabled && !(0, _isAsync.isAsync)(onChangeValidatorRef.current)) {
+      return;
+    }
     if ((0, _isAsync.isAsync)(onBlurValidatorRef.current)) {
       defineAsyncProcess('onBlurValidator');
       setFieldState('validating');
@@ -619,7 +673,7 @@ function useFieldProps(localProps) {
     revealOnBlurValidatorResult({
       result
     });
-  }, [callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
+  }, [asyncBehaviorIsEnabled, callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
   const runOnBlurValidator = (0, _react.useCallback)(async () => {
     if (!onBlurValidatorRef.current) {
       return;
@@ -659,27 +713,31 @@ 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 _types.FormError('The value is required', {
-          validationRule: 'required'
-        })
+        error: new _utils.FormError('Field.errorRequired')
       });
       if (requiredError instanceof Error) {
+        initiator = 'required';
         throw requiredError;
       }
-      if (schemaValidatorRef.current && value !== undefined && !schemaValidatorRef.current(value) && !prioritizeContextSchema) {
-        const error = (0, _ajv.ajvErrorsToOneFormError)(schemaValidatorRef.current.errors, valueRef.current);
-        throw error;
+      if (value !== undefined && !prioritizeContextSchema && typeof schemaValidatorRef.current === 'function') {
+        if (!schemaValidatorRef.current(value)) {
+          const error = (0, _utils.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;
         }
       }
@@ -688,6 +746,7 @@ function useFieldProps(localProps) {
           result
         } = await callOnBlurValidator();
         if (result instanceof Error) {
+          initiator = 'onBlurValidator';
           throw result;
         }
       }
@@ -697,11 +756,10 @@ 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 = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -791,7 +849,7 @@ 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();
       }
     }
@@ -881,6 +939,12 @@ function useFieldProps(localProps) {
   const setChanged = state => {
     changedRef.current = state;
   };
+  const setDisplayValue = (0, _react.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 = (0, _react.useCallback)(async function (argFromInput) {
     let additionalArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
     const currentValue = valueRef.current;
@@ -1028,10 +1092,10 @@ function useFieldProps(localProps) {
     }
   }, [externalValue]);
   (0, _react.useEffect)(() => {
-    if (!hasLocalErrorRef.current) {
+    if (!localErrorInitiatorRef.current) {
       const error = prepareError(dataContextError);
       if (error) {
-        persistErrorState('weak', error);
+        persistErrorState('weak', 'dataContextError', error);
         if (validateInitially) {
           handleError();
         }
@@ -1267,7 +1331,7 @@ 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,
@@ -1280,6 +1344,7 @@ function useFieldProps(localProps) {
     handleChange,
     updateValue,
     setChanged,
+    setDisplayValue,
     forceUpdate,
     dataContext
   });