@dnb/eufemia 10.31.0 → 10.33.0

package/extensions/forms/hooks/useFieldProps.js

@@ -17,16 +17,19 @@ import useMountEffect from '../../../shared/helpers/useMountEffect';
 import useUnmountEffect from '../../../shared/helpers/useUnmountEffect';
 import FieldBlockContext from '../FieldBlock/FieldBlockContext';
 import IterateElementContext from '../Iterate/IterateElementContext';
+import SectionContext from '../Form/Section/SectionContext';
 import FieldBoundaryContext from '../DataContext/FieldBoundary/FieldBoundaryContext';
 import useProcessManager from './useProcessManager';
+import usePath from './usePath';
 import { createSharedState, useSharedState } from '../../../shared/helpers/useSharedState';
 import { isAsync } from '../../../shared/helpers/isAsync';
 import useTranslation from './useTranslation';
+import useExternalValue from './useExternalValue';
 export default function useFieldProps(localeProps) {
   var _dataContext$props,
     _dataContext$ajvInsta,
     _localErrorRef$curren,
-    _ref2,
+    _ref3,
     _this = this,
     _props$path,
     _props$autoComplete;
@@ -35,10 +38,11 @@ export default function useFieldProps(localeProps) {
   } = useContext(FieldPropsContext);
   const props = extend(localeProps);
   const {
-    path,
+    path: pathProp,
+    value: valueProp,
     itemPath,
     emptyValue,
-    required,
+    required: requiredProp,
     disabled: disabledProp,
     info,
     warning,
@@ -78,6 +82,7 @@ export default function useFieldProps(localeProps) {
   const dataContext = useContext(DataContext);
   const fieldBlockContext = useContext(FieldBlockContext);
   const iterateElementContext = useContext(IterateElementContext);
+  const sectionContext = useContext(SectionContext);
   const fieldBoundaryContext = useContext(FieldBoundaryContext);
   const translation = useTranslation();
   const transformers = useRef({
@@ -97,56 +102,78 @@ export default function useFieldProps(localeProps) {
     validateData: validateDataDataContext,
     setFieldState: setFieldStateDataContext,
     setFieldError: setFieldErrorDataContext,
-    setProps: setPropsDataContext,
+    setFieldProps: setPropsDataContext,
     errors: dataContextErrors,
     contextErrorMessages
   } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
   const onChangeContext = dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props = dataContext.props) === null || _dataContext$props === void 0 ? void 0 : _dataContext$props.onChange;
   const disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : props.readOnly;
-  const dataContextError = path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[path] : undefined;
   const inFieldBlock = Boolean(fieldBlockContext);
   const {
     setFieldState: setFieldStateFieldBlock,
-    showFieldError: showFieldErrorFieldBlock
+    showFieldError: showFieldErrorFieldBlock,
+    mountedFieldsRef: mountedFieldsRefFieldBlock
   } = fieldBlockContext !== null && fieldBlockContext !== void 0 ? fieldBlockContext : {};
-  const inIterate = Boolean(iterateElementContext);
   const {
-    index: iterateElementIndex,
-    path: iteratePath,
     handleChange: handleChangeIterateContext
   } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
+  const {
+    path: sectionPath,
+    handleChange: handleChangeSectionContext,
+    errorPrioritization
+  } = sectionContext !== null && sectionContext !== void 0 ? sectionContext : {};
   const {
     setFieldError
   } = fieldBoundaryContext !== null && fieldBoundaryContext !== void 0 ? fieldBoundaryContext : {};
-  if (path && path.substring(0, 1) !== '/') {
-    throw new Error('Invalid path. Data value path JSON Pointers must be from root (starting with a /).');
-  }
-  if (itemPath && itemPath.substring(0, 1) !== '/') {
-    throw new Error('Invalid itemPath. Item pathJSON Pointers must be from root of iterate element (starting with a /).');
-  }
-  if (itemPath && !inIterate) {
-    throw new Error('itemPath cannot be used when not inside an iterate context. Wrap the component in an Iterate.Array.');
-  }
-  const identifier = useMemo(() => {
-    if (itemPath) {
-      const iterateValuePath = `${iteratePath}/${iterateElementIndex}${itemPath && itemPath !== '/' ? itemPath : ''}`;
-      return iterateValuePath;
-    }
-    return path !== null && path !== void 0 ? path : id;
-  }, [itemPath, path, id, iteratePath, iterateElementIndex]);
+  const hasPath = Boolean(pathProp);
+  const {
+    path,
+    identifier,
+    makeIteratePath
+  } = usePath({
+    id,
+    path: pathProp,
+    itemPath
+  });
   const externalValue = useExternalValue({
     path,
     itemPath,
-    props,
+    value: valueProp,
     transformers,
     emptyValue
   });
   const valueRef = useRef(externalValue);
   const changedRef = useRef(false);
   const hasFocusRef = useRef(false);
+  const required = useMemo(() => {
+    if (requiredProp) {
+      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;
+      }
+    }
+  }, [sectionPath, dataContext.schema, identifier, requiredProp, schema]);
   const showErrorRef = useRef(Boolean(validateInitially || errorProp));
   const errorMethodRef = useRef({});
   const localErrorRef = useRef();
+  const hasLocalErrorRef = useRef(false);
+  const dataContextError = useMemo(() => {
+    return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
+  }, [dataContextErrors, identifier, path]);
   const contextErrorRef = useRef(dataContextError);
   const validatorRef = useRef(validator);
   useUpdateEffect(() => {
@@ -231,18 +258,6 @@ export default function useFieldProps(localeProps) {
     showErrorRef.current = false;
     showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
   }, [showFieldErrorFieldBlock, identifier]);
-  const error = showErrorRef.current || ((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['validationRule']) === 'type' ? (_ref2 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref2 !== void 0 ? _ref2 : contextErrorRef.current : undefined;
-  const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
-  const hasError = useCallback(() => {
-    var _ref3;
-    return Boolean((_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current);
-  }, [errorProp]);
-  const errorMessagesRef = useRef(null);
-  errorMessagesRef.current = useMemo(() => {
-    return _objectSpread({
-      required: translation.Field.errorRequired
-    }, errorMessages);
-  }, [errorMessages, translation.Field.errorRequired]);
   const prepareError = useCallback(error => {
     if (error instanceof FormError) {
       var _error$messageValues;
@@ -257,8 +272,8 @@ export default function useFieldProps(localeProps) {
           message = fieldMessage;
         }
       }
-      const messageWithValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref4) => {
-        let [key, value] = _ref4;
+      const messageWithValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref2) => {
+        let [key, value] = _ref2;
         return message.replace(`{${key}}`, value);
       }, message);
       error.message = messageWithValues;
@@ -266,6 +281,27 @@ export default function useFieldProps(localeProps) {
     }
     return error;
   }, []);
+  contextErrorRef.current = useMemo(() => {
+    if (!dataContextError) {
+      return undefined;
+    }
+    const error = prepareError(dataContextError);
+    if (errorChanged(error, contextErrorRef.current)) {
+      return error;
+    }
+  }, [dataContextError, prepareError]);
+  const error = showErrorRef.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;
+  const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
+  const hasError = useCallback(() => {
+    var _ref4;
+    return Boolean((_ref4 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref4 !== void 0 ? _ref4 : contextErrorRef.current);
+  }, [errorProp]);
+  const errorMessagesRef = useRef(null);
+  errorMessagesRef.current = useMemo(() => {
+    return _objectSpread({
+      required: translation.Field.errorRequired
+    }, errorMessages);
+  }, [errorMessages, translation.Field.errorRequired]);
   const stateId = useId();
   const persistErrorState = useCallback(function (method) {
     let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
@@ -296,6 +332,7 @@ export default function useFieldProps(localeProps) {
   }, [prepareError, setFieldErrorDataContext, identifier, setFieldError, setFieldStateDataContext, setFieldStateFieldBlock, stateId, inFieldBlock, validateInitially]);
   const clearErrorState = useCallback(() => {
     persistErrorState('wipe');
+    hasLocalErrorRef.current = false;
   }, [persistErrorState]);
   const callValidator = useCallback(async () => {
     if (typeof validatorRef.current !== 'function') {
@@ -352,6 +389,13 @@ export default function useFieldProps(localeProps) {
     showError();
     forceUpdate();
   }, [persistErrorState, defineAsyncProcess, setFieldState, showError]);
+  const prioritizeContextSchema = useMemo(() => {
+    if (errorPrioritization) {
+      const schemaPath = identifier.split('/').join('/properties/');
+      const hasContextSchema = pointer.has((dataContext === null || dataContext === void 0 ? void 0 : dataContext.schema) || {}, schemaPath);
+      return hasContextSchema && (errorPrioritization === null || errorPrioritization === void 0 ? void 0 : errorPrioritization.indexOf('contextSchema')) === 0;
+    }
+  }, [dataContext === null || dataContext === void 0 ? void 0 : dataContext.schema, errorPrioritization, identifier]);
   const validateValue = useCallback(async () => {
     const isProcessActive = startProcess();
     if (disabled) {
@@ -368,7 +412,7 @@ export default function useFieldProps(localeProps) {
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
-        required,
+        required: requiredProp !== null && requiredProp !== void 0 ? requiredProp : required,
         isChanged: changedRef.current,
         error: new FormError('The value is required', {
           validationRule: 'required'
@@ -377,7 +421,7 @@ export default function useFieldProps(localeProps) {
       if (requiredError instanceof Error) {
         throw requiredError;
       }
-      if (schemaValidatorRef.current && value !== undefined && !schemaValidatorRef.current(value)) {
+      if (schemaValidatorRef.current && value !== undefined && !schemaValidatorRef.current(value) && !prioritizeContextSchema) {
         const error = ajvErrorsToOneFormError(schemaValidatorRef.current.errors, valueRef.current);
         throw error;
       }
@@ -393,10 +437,11 @@ export default function useFieldProps(localeProps) {
       validatedValue.current = value;
     } catch (error) {
       if (isProcessActive()) {
+        hasLocalErrorRef.current = true;
         persistErrorState('weak', error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, required, validateInitially, callValidator, persistErrorState]);
+  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, callValidator, persistErrorState]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       showError();
@@ -510,32 +555,34 @@ export default function useFieldProps(localeProps) {
         }]
       });
     }
-    if (path) {
+    if (hasPath) {
       if (isAsync(onChangeContext)) {
         defineAsyncProcess('onChangeContext');
         if (!hasError()) {
-          setEventResult(await (handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path)));
+          setEventResult(await (handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(identifier)));
         } else {
           setEventResult(null);
         }
       } else {
-        setEventResult(handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path));
+        setEventResult(handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(identifier));
       }
     }
     forceUpdate();
-  }, [asyncBehaviorIsEnabled, path, hasError, yieldAsyncProcess, onChangeContext, defineAsyncProcess, setEventResult, handlePathChangeDataContext]);
+  }, [asyncBehaviorIsEnabled, hasPath, identifier, hasError, yieldAsyncProcess, onChangeContext, defineAsyncProcess, setEventResult, handlePathChangeDataContext]);
   const updateValue = useCallback(async newValue => {
     if (newValue === valueRef.current) {
       return;
     }
     valueRef.current = newValue;
-    handlePathChangeUnvalidatedDataContext(path, newValue);
+    if (hasPath) {
+      handlePathChangeUnvalidatedDataContext(identifier, newValue);
+    }
     addToPool('validator', validateValue, isAsync(validatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, isAsync(onChangeContext));
     await runPool(() => {
       handleError();
     });
-  }, [handlePathChangeUnvalidatedDataContext, path, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handleError]);
+  }, [hasPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleError]);
   const handleChange = useCallback(async function (argFromInput) {
     let additionalArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
     const currentValue = valueRef.current;
@@ -545,9 +592,9 @@ export default function useFieldProps(localeProps) {
     }
     const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue));
     changedRef.current = true;
+    handleChangeSectionContext === null || handleChangeSectionContext === void 0 ? void 0 : handleChangeSectionContext(identifier, transformedValue);
     if (itemPath) {
-      const iterateValuePath = `/${iterateElementIndex}${itemPath && itemPath !== '/' ? itemPath : ''}`;
-      handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(iterateValuePath, transformedValue);
+      handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(), transformedValue);
     }
     if (asyncBehaviorIsEnabled) {
       hideError();
@@ -589,13 +636,12 @@ export default function useFieldProps(localeProps) {
       setEventResult(onChange === null || onChange === void 0 ? void 0 : onChange.apply(_this, getArgs()));
     }
     await runPool();
-  }, [addToPool, asyncBehaviorIsEnabled, handleChangeIterateContext, hasError, hideError, itemPath, iterateElementIndex, onChange, runPool, defineAsyncProcess, setEventResult, updateValue, yieldAsyncProcess]);
+  }, [itemPath, asyncBehaviorIsEnabled, onChange, runPool, handleChangeIterateContext, makeIteratePath, handleChangeSectionContext, identifier, hideError, updateValue, addToPool, yieldAsyncProcess, defineAsyncProcess, hasError, setEventResult]);
   const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
   useMountEffect(() => {
     dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleMountField(identifier);
-    setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
     validateValue();
   });
   useUnmountEffect(() => {
@@ -617,33 +663,39 @@ export default function useFieldProps(localeProps) {
     forceUpdate();
   }, [externalValue, validateValue]);
   useEffect(() => {
-    const error = prepareError(dataContextError);
-    if (errorChanged(error, contextErrorRef.current)) {
-      contextErrorRef.current = error;
-      forceUpdate();
+    if (!hasLocalErrorRef.current) {
+      const error = prepareError(dataContextError);
+      if (error) {
+        persistErrorState('weak', error);
+        if (validateInitially) {
+          handleError();
+        }
+      } else {
+        clearErrorState();
+      }
     }
-  }, [dataContextError, prepareError]);
+  }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
   useEffect(() => {
-    if (path) {
+    if (hasPath) {
       let value = props.value;
-      const hasValue = pointer.has(dataContext.data, path);
-      const existingValue = hasValue ? pointer.get(dataContext.data, path) : undefined;
+      const hasValue = pointer.has(dataContext.data, identifier);
+      const existingValue = 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, path);
+        const hasValue = pointer.has(sharedState.data, identifier);
         if (hasValue) {
-          const sharedValue = pointer.get(sharedState.data, path);
+          const sharedValue = pointer.get(sharedState.data, identifier);
           if (sharedValue) {
             value = sharedValue;
           }
         }
       }
       if (!hasValue || value !== existingValue && valueRef.current !== existingValue) {
-        updateDataValueDataContext === null || updateDataValueDataContext === void 0 ? void 0 : updateDataValueDataContext(path, value);
+        updateDataValueDataContext === null || updateDataValueDataContext === void 0 ? void 0 : updateDataValueDataContext(identifier, value);
         validateDataDataContext === null || validateDataDataContext === void 0 ? void 0 : validateDataDataContext();
       }
     }
-  }, [dataContext.data, dataContext.id, path, props.value, updateDataValueDataContext, validateDataDataContext]);
+  }, [dataContext.data, dataContext.id, identifier, hasPath, props.value, updateDataValueDataContext, validateDataDataContext]);
   useEffect(() => {
     if (dataContext.showAllErrors) {
       if (fieldStateRef.current !== 'validating') {
@@ -700,8 +752,8 @@ export default function useFieldProps(localeProps) {
         });
       }
       return () => {
-        if (fieldBlockContext.mountedFieldsRef) {
-          fieldBlockContext.mountedFieldsRef.current[identifier] = true;
+        if (mountedFieldsRefFieldBlock) {
+          mountedFieldsRefFieldBlock.current[identifier] = true;
         }
       };
     }
@@ -725,12 +777,12 @@ export default function useFieldProps(localeProps) {
     htmlAttributes['aria-invalid'] = error ? 'true' : 'false';
   }
   if (required) {
-    htmlAttributes['aria-required'] = required ? 'true' : 'false';
+    htmlAttributes['aria-required'] = 'true';
   }
   if (inFieldBlock) {
     var _fieldBlockContext$fi;
-    if (fieldBlockContext.mountedFieldsRef) {
-      fieldBlockContext.mountedFieldsRef.current[identifier] = true;
+    if (mountedFieldsRefFieldBlock) {
+      mountedFieldsRefFieldBlock.current[identifier] = true;
     }
     const stateIds = (_fieldBlockContext$fi = fieldBlockContext.fieldStateIdsRef) === null || _fieldBlockContext$fi === void 0 ? void 0 : _fieldBlockContext$fi.current;
     if (stateIds) {
@@ -742,7 +794,7 @@ export default function useFieldProps(localeProps) {
       htmlAttributes['aria-describedby'] = combineDescribedBy(htmlAttributes, ids);
     }
   }
-  const fieldBlockProps = {
+  const fieldSectionProps = {
     info: !inFieldBlock ? infoRef.current : undefined,
     warning: !inFieldBlock ? warningRef.current : undefined,
     error: !inFieldBlock ? error : undefined,
@@ -750,8 +802,8 @@ export default function useFieldProps(localeProps) {
     fieldState: resolveValidatingState(fieldStateRef.current)
   };
   const sharedData = useSharedState(id);
-  sharedData.set(fieldBlockProps);
-  return _objectSpread(_objectSpread(_objectSpread({}, props), fieldBlockProps), {}, {
+  sharedData.set(fieldSectionProps);
+  return _objectSpread(_objectSpread(_objectSpread({}, props), fieldSectionProps), {}, {
     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,
     id,
@@ -771,37 +823,4 @@ export default function useFieldProps(localeProps) {
 function resolveValidatingState(state) {
   return state === 'validating' ? 'pending' : state;
 }
-export function useExternalValue(_ref7) {
-  let {
-    path,
-    itemPath,
-    props,
-    transformers,
-    emptyValue = undefined
-  } = _ref7;
-  const dataContext = useContext(DataContext);
-  const iterateElementContext = useContext(IterateElementContext);
-  const inIterate = Boolean(iterateElementContext);
-  const {
-    value: iterateElementValue
-  } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
-  return useMemo(() => {
-    if (props.value !== emptyValue) {
-      return transformers.current.fromExternal(props.value);
-    }
-    if (inIterate && itemPath) {
-      if (itemPath === '/') {
-        return iterateElementValue;
-      }
-      return pointer.has(iterateElementValue, itemPath) ? pointer.get(iterateElementValue, itemPath) : emptyValue;
-    }
-    if (dataContext.data && path) {
-      if (path === '/') {
-        return dataContext.data;
-      }
-      return pointer.has(dataContext.data, path) ? pointer.get(dataContext.data, path) : emptyValue;
-    }
-    return emptyValue;
-  }, [props.value, emptyValue, inIterate, itemPath, dataContext.data, path, transformers, iterateElementValue]);
-}
 //# sourceMappingURL=useFieldProps.js.map