@dnb/eufemia 10.32.0 → 10.34.0

package/extensions/forms/hooks/useFieldProps.js

@@ -17,13 +17,17 @@ 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,
+    _useExternalValue,
     _dataContext$ajvInsta,
     _localErrorRef$curren,
     _ref3,
@@ -35,7 +39,9 @@ export default function useFieldProps(localeProps) {
   } = useContext(FieldPropsContext);
   const props = extend(localeProps);
   const {
-    path,
+    path: pathProp,
+    value: valueProp,
+    defaultValue,
     itemPath,
     emptyValue,
     required: requiredProp,
@@ -78,6 +84,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,7 +104,7 @@ export default function useFieldProps(localeProps) {
     validateData: validateDataDataContext,
     setFieldState: setFieldStateDataContext,
     setFieldError: setFieldErrorDataContext,
-    setProps: setPropsDataContext,
+    setFieldProps: setPropsDataContext,
     errors: dataContextErrors,
     contextErrorMessages
   } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
@@ -109,38 +116,34 @@ export default function useFieldProps(localeProps) {
     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,
+    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 externalValue = useExternalValue({
+  const hasPath = Boolean(pathProp);
+  const {
+    path,
+    identifier,
+    makeIteratePath
+  } = usePath({
+    id,
+    path: pathProp,
+    itemPath
+  });
+  const defaultValueRef = useRef(defaultValue);
+  const externalValue = (_useExternalValue = useExternalValue({
     path,
     itemPath,
-    props,
+    value: valueProp,
     transformers,
     emptyValue
-  });
+  })) !== null && _useExternalValue !== void 0 ? _useExternalValue : defaultValueRef.current;
   const valueRef = useRef(externalValue);
   const changedRef = useRef(false);
   const hasFocusRef = useRef(false);
@@ -157,12 +160,15 @@ export default function useFieldProps(localeProps) {
         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 (collected.includes(paths.at(-1))) {
+      if (paths.filter(Boolean).some(p => collected.some(c => c.includes(p)))) {
         return true;
       }
     }
-  }, [dataContext === null || dataContext === void 0 ? void 0 : dataContext.schema, identifier, requiredProp, schema]);
+  }, [sectionPath, dataContext.schema, identifier, requiredProp, schema]);
   const showErrorRef = useRef(Boolean(validateInitially || errorProp));
   const errorMethodRef = useRef({});
   const localErrorRef = useRef();
@@ -385,6 +391,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) {
@@ -401,7 +414,7 @@ export default function useFieldProps(localeProps) {
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
-        required: requiredProp,
+        required: requiredProp !== null && requiredProp !== void 0 ? requiredProp : required,
         isChanged: changedRef.current,
         error: new FormError('The value is required', {
           validationRule: 'required'
@@ -410,7 +423,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;
       }
@@ -430,7 +443,7 @@ export default function useFieldProps(localeProps) {
         persistErrorState('weak', error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, 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();
@@ -544,32 +557,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;
@@ -580,8 +595,7 @@ export default function useFieldProps(localeProps) {
     const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue));
     changedRef.current = true;
     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();
@@ -623,7 +637,7 @@ 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, 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);
@@ -663,26 +677,30 @@ export default function useFieldProps(localeProps) {
     }
   }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
   useEffect(() => {
-    if (path) {
-      let value = props.value;
-      const hasValue = pointer.has(dataContext.data, path);
-      const existingValue = hasValue ? pointer.get(dataContext.data, path) : undefined;
+    if (hasPath) {
+      let value = valueProp;
+      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 (typeof defaultValueRef.current !== 'undefined' && typeof value === 'undefined') {
+        value = defaultValueRef.current;
+        defaultValueRef.current = undefined;
+      }
       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, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
   useEffect(() => {
     if (dataContext.showAllErrors) {
       if (fieldStateRef.current !== 'validating') {
@@ -781,7 +799,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,
@@ -789,8 +807,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,
@@ -810,37 +828,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