@dnb/eufemia 10.32.0 → 10.34.0

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useFieldProps;
-exports.useExternalValue = useExternalValue;
 var _react = require("react");
 var _jsonPointer = _interopRequireDefault(require("json-pointer"));
 var _utils = require("../utils");
@@ -20,11 +19,14 @@ var _useMountEffect = _interopRequireDefault(require("../../../shared/helpers/us
 var _useUnmountEffect = _interopRequireDefault(require("../../../shared/helpers/useUnmountEffect"));
 var _FieldBlockContext = _interopRequireDefault(require("../FieldBlock/FieldBlockContext"));
 var _IterateElementContext = _interopRequireDefault(require("../Iterate/IterateElementContext"));
+var _SectionContext = _interopRequireDefault(require("../Form/Section/SectionContext"));
 var _FieldBoundaryContext = _interopRequireDefault(require("../DataContext/FieldBoundary/FieldBoundaryContext"));
 var _useProcessManager = _interopRequireDefault(require("./useProcessManager"));
+var _usePath = _interopRequireDefault(require("./usePath"));
 var _useSharedState = require("../../../shared/helpers/useSharedState");
 var _isAsync = require("../../../shared/helpers/isAsync");
 var _useTranslation = _interopRequireDefault(require("./useTranslation"));
+var _useExternalValue2 = _interopRequireDefault(require("./useExternalValue"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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; }
@@ -33,6 +35,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function useFieldProps(localeProps) {
   var _dataContext$props,
+    _useExternalValue,
     _dataContext$ajvInsta,
     _localErrorRef$curren,
     _ref3,
@@ -44,7 +47,9 @@ function useFieldProps(localeProps) {
   } = (0, _react.useContext)(_FieldPropsContext.default);
   const props = extend(localeProps);
   const {
-    path,
+    path: pathProp,
+    value: valueProp,
+    defaultValue,
     itemPath,
     emptyValue,
     required: requiredProp,
@@ -87,6 +92,7 @@ function useFieldProps(localeProps) {
   const dataContext = (0, _react.useContext)(_DataContext.Context);
   const fieldBlockContext = (0, _react.useContext)(_FieldBlockContext.default);
   const iterateElementContext = (0, _react.useContext)(_IterateElementContext.default);
+  const sectionContext = (0, _react.useContext)(_SectionContext.default);
   const fieldBoundaryContext = (0, _react.useContext)(_FieldBoundaryContext.default);
   const translation = (0, _useTranslation.default)();
   const transformers = (0, _react.useRef)({
@@ -106,7 +112,7 @@ function useFieldProps(localeProps) {
     validateData: validateDataDataContext,
     setFieldState: setFieldStateDataContext,
     setFieldError: setFieldErrorDataContext,
-    setProps: setPropsDataContext,
+    setFieldProps: setPropsDataContext,
     errors: dataContextErrors,
     contextErrorMessages
   } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
@@ -118,38 +124,34 @@ 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 = (0, _react.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
+  } = (0, _usePath.default)({
+    id,
+    path: pathProp,
+    itemPath
+  });
+  const defaultValueRef = (0, _react.useRef)(defaultValue);
+  const externalValue = (_useExternalValue = (0, _useExternalValue2.default)({
     path,
     itemPath,
-    props,
+    value: valueProp,
     transformers,
     emptyValue
-  });
+  })) !== null && _useExternalValue !== void 0 ? _useExternalValue : defaultValueRef.current;
   const valueRef = (0, _react.useRef)(externalValue);
   const changedRef = (0, _react.useRef)(false);
   const hasFocusRef = (0, _react.useRef)(false);
@@ -166,12 +168,15 @@ function useFieldProps(localeProps) {
         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 (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 = (0, _react.useRef)(Boolean(validateInitially || errorProp));
   const errorMethodRef = (0, _react.useRef)({});
   const localErrorRef = (0, _react.useRef)();
@@ -394,6 +399,13 @@ function useFieldProps(localeProps) {
     showError();
     forceUpdate();
   }, [persistErrorState, defineAsyncProcess, setFieldState, showError]);
+  const prioritizeContextSchema = (0, _react.useMemo)(() => {
+    if (errorPrioritization) {
+      const schemaPath = identifier.split('/').join('/properties/');
+      const hasContextSchema = _jsonPointer.default.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 = (0, _react.useCallback)(async () => {
     const isProcessActive = startProcess();
     if (disabled) {
@@ -410,7 +422,7 @@ 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 _types.FormError('The value is required', {
           validationRule: 'required'
@@ -419,7 +431,7 @@ 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 = (0, _ajv.ajvErrorsToOneFormError)(schemaValidatorRef.current.errors, valueRef.current);
         throw error;
       }
@@ -439,7 +451,7 @@ 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 = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       showError();
@@ -553,32 +565,34 @@ function useFieldProps(localeProps) {
         }]
       });
     }
-    if (path) {
+    if (hasPath) {
       if ((0, _isAsync.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 = (0, _react.useCallback)(async newValue => {
     if (newValue === valueRef.current) {
       return;
     }
     valueRef.current = newValue;
-    handlePathChangeUnvalidatedDataContext(path, newValue);
+    if (hasPath) {
+      handlePathChangeUnvalidatedDataContext(identifier, newValue);
+    }
     addToPool('validator', validateValue, (0, _isAsync.isAsync)(validatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, (0, _isAsync.isAsync)(onChangeContext));
     await runPool(() => {
       handleError();
     });
-  }, [handlePathChangeUnvalidatedDataContext, path, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handleError]);
+  }, [hasPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleError]);
   const handleChange = (0, _react.useCallback)(async function (argFromInput) {
     let additionalArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
     const currentValue = valueRef.current;
@@ -589,8 +603,7 @@ 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();
@@ -632,7 +645,7 @@ 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 = (0, _react.useCallback)(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = (0, _react.useCallback)(() => setHasFocus(false), [setHasFocus]);
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
@@ -672,26 +685,30 @@ function useFieldProps(localeProps) {
     }
   }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
   (0, _react.useEffect)(() => {
-    if (path) {
-      let value = props.value;
-      const hasValue = _jsonPointer.default.has(dataContext.data, path);
-      const existingValue = hasValue ? _jsonPointer.default.get(dataContext.data, path) : undefined;
+    if (hasPath) {
+      let value = valueProp;
+      const hasValue = _jsonPointer.default.has(dataContext.data, identifier);
+      const existingValue = hasValue ? _jsonPointer.default.get(dataContext.data, identifier) : undefined;
       if (dataContext.id && !hasValue && typeof existingValue === 'undefined' && typeof value === 'undefined') {
         const sharedState = (0, _useSharedState.createSharedState)(dataContext.id);
-        const hasValue = _jsonPointer.default.has(sharedState.data, path);
+        const hasValue = _jsonPointer.default.has(sharedState.data, identifier);
         if (hasValue) {
-          const sharedValue = _jsonPointer.default.get(sharedState.data, path);
+          const sharedValue = _jsonPointer.default.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]);
   (0, _react.useEffect)(() => {
     if (dataContext.showAllErrors) {
       if (fieldStateRef.current !== 'validating') {
@@ -790,7 +807,7 @@ function useFieldProps(localeProps) {
       htmlAttributes['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(htmlAttributes, ids);
     }
   }
-  const fieldBlockProps = {
+  const fieldSectionProps = {
     info: !inFieldBlock ? infoRef.current : undefined,
     warning: !inFieldBlock ? warningRef.current : undefined,
     error: !inFieldBlock ? error : undefined,
@@ -798,8 +815,8 @@ function useFieldProps(localeProps) {
     fieldState: resolveValidatingState(fieldStateRef.current)
   };
   const sharedData = (0, _useSharedState.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,
@@ -819,37 +836,4 @@ function useFieldProps(localeProps) {
 function resolveValidatingState(state) {
   return state === 'validating' ? 'pending' : state;
 }
-function useExternalValue(_ref7) {
-  let {
-    path,
-    itemPath,
-    props,
-    transformers,
-    emptyValue = undefined
-  } = _ref7;
-  const dataContext = (0, _react.useContext)(_DataContext.Context);
-  const iterateElementContext = (0, _react.useContext)(_IterateElementContext.default);
-  const inIterate = Boolean(iterateElementContext);
-  const {
-    value: iterateElementValue
-  } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
-  return (0, _react.useMemo)(() => {
-    if (props.value !== emptyValue) {
-      return transformers.current.fromExternal(props.value);
-    }
-    if (inIterate && itemPath) {
-      if (itemPath === '/') {
-        return iterateElementValue;
-      }
-      return _jsonPointer.default.has(iterateElementValue, itemPath) ? _jsonPointer.default.get(iterateElementValue, itemPath) : emptyValue;
-    }
-    if (dataContext.data && path) {
-      if (path === '/') {
-        return dataContext.data;
-      }
-      return _jsonPointer.default.has(dataContext.data, path) ? _jsonPointer.default.get(dataContext.data, path) : emptyValue;
-    }
-    return emptyValue;
-  }, [props.value, emptyValue, inIterate, itemPath, dataContext.data, path, transformers, iterateElementValue]);
-}
 //# sourceMappingURL=useFieldProps.js.map