@dnb/eufemia 10.31.0 → 10.32.0

package/cjs/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss

@@ -0,0 +1 @@
+/* Sbanken theme */

package/cjs/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.css

@@ -0,0 +1,3 @@
+.dnb-forms-wizard-layout__contents .dnb-card {
+  --border-color: var(--color-pistachio);
+}

package/cjs/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.min.css

@@ -0,0 +1 @@
+.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio)}

package/cjs/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss

@@ -0,0 +1,7 @@
+.dnb-forms-wizard-layout {
+  &__contents {
+    .dnb-card {
+      --border-color: var(--color-pistachio);
+    }
+  }
+}

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

@@ -35,7 +35,7 @@ function useFieldProps(localeProps) {
   var _dataContext$props,
     _dataContext$ajvInsta,
     _localErrorRef$curren,
-    _ref2,
+    _ref3,
     _this = this,
     _props$path,
     _props$autoComplete;
@@ -47,7 +47,7 @@ function useFieldProps(localeProps) {
     path,
     itemPath,
     emptyValue,
-    required,
+    required: requiredProp,
     disabled: disabledProp,
     info,
     warning,
@@ -112,11 +112,11 @@ function useFieldProps(localeProps) {
   } = 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 {
@@ -153,9 +153,32 @@ function useFieldProps(localeProps) {
   const valueRef = (0, _react.useRef)(externalValue);
   const changedRef = (0, _react.useRef)(false);
   const hasFocusRef = (0, _react.useRef)(false);
+  const required = (0, _react.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 = _jsonPointer.default.has(schema, schemaPath) ? _jsonPointer.default.get(schema, schemaPath) : schema;
+        requiredList.push(schemaPart === null || schemaPart === void 0 ? void 0 : schemaPart.required);
+      }
+      const collected = requiredList.flatMap(v => v).filter(Boolean);
+      if (collected.includes(paths.at(-1))) {
+        return true;
+      }
+    }
+  }, [dataContext === null || dataContext === void 0 ? void 0 : dataContext.schema, identifier, requiredProp, schema]);
   const showErrorRef = (0, _react.useRef)(Boolean(validateInitially || errorProp));
   const errorMethodRef = (0, _react.useRef)({});
   const localErrorRef = (0, _react.useRef)();
+  const hasLocalErrorRef = (0, _react.useRef)(false);
+  const dataContextError = (0, _react.useMemo)(() => {
+    return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
+  }, [dataContextErrors, identifier, path]);
   const contextErrorRef = (0, _react.useRef)(dataContextError);
   const validatorRef = (0, _react.useRef)(validator);
   (0, _useUpdateEffect.default)(() => {
@@ -240,18 +263,6 @@ 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 = (0, _react.useCallback)(() => {
-    var _ref3;
-    return Boolean((_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current);
-  }, [errorProp]);
-  const errorMessagesRef = (0, _react.useRef)(null);
-  errorMessagesRef.current = (0, _react.useMemo)(() => {
-    return _objectSpread({
-      required: translation.Field.errorRequired
-    }, errorMessages);
-  }, [errorMessages, translation.Field.errorRequired]);
   const prepareError = (0, _react.useCallback)(error => {
     if (error instanceof _types.FormError) {
       var _error$messageValues;
@@ -266,8 +277,8 @@ 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;
@@ -275,6 +286,27 @@ function useFieldProps(localeProps) {
     }
     return error;
   }, []);
+  contextErrorRef.current = (0, _react.useMemo)(() => {
+    if (!dataContextError) {
+      return undefined;
+    }
+    const error = prepareError(dataContextError);
+    if ((0, _utils.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 = (0, _react.useCallback)(() => {
+    var _ref4;
+    return Boolean((_ref4 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref4 !== void 0 ? _ref4 : contextErrorRef.current);
+  }, [errorProp]);
+  const errorMessagesRef = (0, _react.useRef)(null);
+  errorMessagesRef.current = (0, _react.useMemo)(() => {
+    return _objectSpread({
+      required: translation.Field.errorRequired
+    }, errorMessages);
+  }, [errorMessages, translation.Field.errorRequired]);
   const stateId = (0, _useId.default)();
   const persistErrorState = (0, _react.useCallback)(function (method) {
     let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
@@ -305,6 +337,7 @@ function useFieldProps(localeProps) {
   }, [prepareError, setFieldErrorDataContext, identifier, setFieldError, setFieldStateDataContext, setFieldStateFieldBlock, stateId, inFieldBlock, validateInitially]);
   const clearErrorState = (0, _react.useCallback)(() => {
     persistErrorState('wipe');
+    hasLocalErrorRef.current = false;
   }, [persistErrorState]);
   const callValidator = (0, _react.useCallback)(async () => {
     if (typeof validatorRef.current !== 'function') {
@@ -377,7 +410,7 @@ function useFieldProps(localeProps) {
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
-        required,
+        required: requiredProp,
         isChanged: changedRef.current,
         error: new _types.FormError('The value is required', {
           validationRule: 'required'
@@ -402,10 +435,11 @@ 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, validateInitially, callValidator, persistErrorState]);
   const handleError = (0, _react.useCallback)(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       showError();
@@ -604,7 +638,6 @@ function useFieldProps(localeProps) {
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
   (0, _useMountEffect.default)(() => {
     dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleMountField(identifier);
-    setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
     validateValue();
   });
   (0, _useUnmountEffect.default)(() => {
@@ -626,12 +659,18 @@ function useFieldProps(localeProps) {
     forceUpdate();
   }, [externalValue, validateValue]);
   (0, _react.useEffect)(() => {
-    const error = prepareError(dataContextError);
-    if ((0, _utils.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]);
   (0, _react.useEffect)(() => {
     if (path) {
       let value = props.value;
@@ -709,8 +748,8 @@ function useFieldProps(localeProps) {
         });
       }
       return () => {
-        if (fieldBlockContext.mountedFieldsRef) {
-          fieldBlockContext.mountedFieldsRef.current[identifier] = true;
+        if (mountedFieldsRefFieldBlock) {
+          mountedFieldsRefFieldBlock.current[identifier] = true;
         }
       };
     }
@@ -734,12 +773,12 @@ 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) {