@dnb/eufemia 10.6.0 → 10.8.0

package/es/extensions/forms/Field/hooks/useField.js

@@ -14,11 +14,11 @@ export default function useField(props) {
     emptyValue,
     required,
     error: errorProp,
-    onFocus: onFocusProp,
-    onBlur: onBlurProp,
-    onChange: onChangeProp,
-    validator: validatorProp,
-    onBlurValidator: onBlurValidatorProp,
+    onFocus,
+    onBlur,
+    onChange,
+    validator,
+    onBlurValidator,
     schema,
     errorMessages,
     validateInitially,
@@ -62,8 +62,8 @@ export default function useField(props) {
     setFieldGroupError === null || setFieldGroupError === void 0 ? void 0 : setFieldGroupError(path ?? id, errorWithCorrectMessage);
   }, [path, id, errorMessages, dataContextSetPathWithError, setFieldGroupError]);
   const validateValue = useCallback(valueToValidate => {
-    if (typeof validatorProp === 'function') {
-      Promise.resolve(validatorProp(valueToValidate)).then(setErrorAndUpdateDataContext);
+    if (typeof validator === 'function') {
+      Promise.resolve(validator(valueToValidate)).then(setErrorAndUpdateDataContext);
     }
     if (valueToValidate === emptyValue && required) {
       const error = new FormError('The value is required', {
@@ -84,7 +84,7 @@ export default function useField(props) {
       setErrorAndUpdateDataContext(undefined);
       return undefined;
     }
-  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validatorProp]);
+  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validator]);
   useEffect(() => {
     if (!error && path && dataContextErrors !== null && dataContextErrors !== void 0 && dataContextErrors[path]) {
       setErrorAndUpdateDataContext(dataContextErrors[path]);
@@ -96,36 +96,38 @@ export default function useField(props) {
       setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
     }
   }, [id, path, dataContext.showAllErrors, setShowFieldGroupError]);
-  const onFocus = useCallback(({
-    onFocusValue
-  }) => {
-    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(onFocusValue ?? value);
-  }, [value, onFocusProp]);
-  const onBlur = useCallback(({
-    onBlurValue
-  }) => {
-    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(onBlurValue ?? value);
-    if (!changedRef.current && !validateUnchanged) {
-      return;
+  const setHasFocus = useCallback((hasFocus, valueOverride) => {
+    if (hasFocus) {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(valueOverride ?? value);
+    } else {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(valueOverride ?? value);
+      if (!changedRef.current && !validateUnchanged) {
+        return;
+      }
+      if (typeof onBlurValidator === 'function') {
+        Promise.resolve(onBlurValidator(valueOverride ?? value)).then(setErrorAndUpdateDataContext);
+      }
+      setShowError(true);
+      setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
     }
-    if (typeof onBlurValidatorProp === 'function') {
-      Promise.resolve(onBlurValidatorProp(onBlurValue ?? value)).then(setErrorAndUpdateDataContext);
+  }, [id, path, value, validateUnchanged, onFocus, onBlur, onBlurValidator, setErrorAndUpdateDataContext, setShowFieldGroupError]);
+  const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
+  const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
+  const handleChange = useCallback(argFromInput => {
+    const newValue = fromInput(argFromInput);
+    if (newValue === value) {
+      return;
     }
-    setShowError(true);
-    setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
-  }, [id, path, value, onBlurProp, validateUnchanged, onBlurValidatorProp, setErrorAndUpdateDataContext, setShowFieldGroupError]);
-  const onChange = useCallback(valueFromInput => {
-    const newValue = fromInput(valueFromInput);
     setValue(newValue);
     changedRef.current = true;
     setShowError(false);
     setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, false);
     validateValue(newValue);
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     if (path) {
       dataContextHandlePathChange === null || dataContextHandlePathChange === void 0 ? void 0 : dataContextHandlePathChange(path, newValue);
     }
-  }, [id, path, onChangeProp, validateValue, dataContextHandlePathChange, setShowFieldGroupError, fromInput]);
+  }, [id, path, value, onChange, validateValue, dataContextHandlePathChange, setShowFieldGroupError, fromInput]);
   const exportError = useMemo(() => errorProp ?? error, [errorProp, error]);
   useEffect(() => {
     if (path) {
@@ -142,9 +144,10 @@ export default function useField(props) {
     id,
     value: toInput(value),
     error: inFieldGroup ? undefined : showError ? exportError : undefined,
-    onFocus,
-    onBlur,
-    onChange
+    setHasFocus,
+    handleFocus,
+    handleBlur,
+    handleChange
   });
 }
 //# sourceMappingURL=useField.js.map

package/es/extensions/forms/Field/hooks/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","names":["useRef","useEffect","useContext","useCallback","useMemo","useState","pointer","FormError","ajv","ajvErrorsToOneFormError","DataContext","FieldGroupContext","makeUniqueId","useField","props","path","emptyValue","required","error","errorProp","onFocus","onFocusProp","onBlur","onBlurProp","onChange","onChangeProp","validator","validatorProp","onBlurValidator","onBlurValidatorProp","schema","errorMessages","validateInitially","validateUnchanged","toInput","value","fromInput","id","dataContext","Context","fieldGroupContext","inFieldGroup","Boolean","setFieldError","setFieldGroupError","setShowFieldError","setShowFieldGroupError","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","substring","Error","externalValue","data","undefined","has","get","setValue","changedRef","setError","showError","setShowError","schemaValidator","Object","keys","length","compile","setErrorAndUpdateDataContext","errorWithCorrectMessage","validationRule","validateValue","valueToValidate","Promise","resolve","then","showAllErrors","onFocusValue","onBlurValue","current","valueFromInput","newValue","exportError","handleMountField","handleUnMountField","_objectSpread"],"sources":["../../../../../../src/extensions/forms/Field/hooks/useField.ts"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useContext,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport pointer from 'json-pointer'\nimport { FormError } from '../../types'\nimport ajv, { ajvErrorsToOneFormError } from '../../utils/ajv'\nimport DataContext from '../../DataContext'\nimport type { FieldProps } from '../../field-types'\nimport { FieldGroupContext } from '../../FieldGroup';\nimport { makeUniqueId } from '../../../../shared/component-helper'\n\ninterface ReturnPropOverrides {\n  onFocus: (options?: { onFocusValue: unknown }) => void\n  onBlur: (options?: { onBlurValue: unknown }) => void\n}\n\nexport default function useField<Props extends FieldProps<any>>(\n  props: Props\n): Omit<Props, keyof ReturnPropOverrides> & ReturnPropOverrides {\n  const {\n    path,\n    emptyValue,\n    required,\n    error: errorProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    onChange: onChangeProp,\n    validator: validatorProp,\n    onBlurValidator: onBlurValidatorProp,\n    schema,\n    errorMessages,\n    validateInitially,\n    validateUnchanged,\n    toInput = (value) => value,\n    fromInput = (value) => value,\n  } = props\n  const id = useMemo(() => props.id ?? makeUniqueId(), [props.id]);\n  const dataContext = useContext(DataContext.Context)\n  const fieldGroupContext = useContext(FieldGroupContext);\n  const inFieldGroup = Boolean(fieldGroupContext);\n  const { setFieldError: setFieldGroupError, setShowFieldError: setShowFieldGroupError } = fieldGroupContext ?? {};\n  const {\n    handlePathChange: dataContextHandlePathChange,\n    setPathWithError: dataContextSetPathWithError,\n    errors: dataContextErrors,\n  } = dataContext ?? {}\n\n  if (path && path.substring(0, 1) !== '/') {\n    throw new Error(\n      'Invalid path. Input path JSON Pointers  must be from root (starting with a /).'\n    )\n  }\n\n  const externalValue = useMemo(() => {\n    return (\n      props.value ??\n      (dataContext.data &&\n      path !== undefined &&\n      pointer.has(dataContext.data, path)\n        ? pointer.get(dataContext.data, path)\n        : undefined)\n    )\n  }, [path, props.value, dataContext.data])\n\n  // Hold an internal copy of the input value in case the input component is used uncontrolled,\n  // and to handle errors in Eufemia on components that does not take updated callback functions into account.\n  const [value, setValue] = useState(externalValue)\n  const changedRef = useRef(false)\n\n  useEffect(() => {\n    // When receiving the initial value, or receiving an updated value by props, update the internal value\n    // so the component can be used \"controlled\".\n    setValue(externalValue)\n  }, [externalValue])\n\n  // Error handling\n  const [error, setError] = useState<Error | FormError | undefined>()\n  const [showError, setShowError] = useState<boolean>(\n    Boolean(validateInitially || errorProp)\n  )\n  const schemaValidator = useMemo(\n    () =>\n      schema && Object.keys(schema).length > 0\n        ? ajv.compile(schema)\n        : undefined,\n    [schema]\n  )\n\n  const setErrorAndUpdateDataContext = useCallback(\n    (error: FormError | undefined) => {\n      const errorWithCorrectMessage = \n        (error instanceof FormError &&\n          typeof error.validationRule === 'string' &&\n          errorMessages?.[error.validationRule] !== undefined\n            ? new FormError(errorMessages[error.validationRule])\n            : error);\n      \n      setError(errorWithCorrectMessage);\n\n      if (path) {\n        // Tell the data context about the error, so it can stop the user from submitting the form until the error has been fixed\n        dataContextSetPathWithError?.(path, Boolean(error))\n      }\n\n      setFieldGroupError?.(path ?? id, errorWithCorrectMessage);\n    },\n    [path, id, errorMessages, dataContextSetPathWithError, setFieldGroupError]\n  )\n\n  const validateValue = useCallback(\n    (valueToValidate): FormError | undefined => {\n      // Prioritize received validator functions first\n      // Possible future change: Merge errors if multiple, like one message with each message concatinated.\n      if (typeof validatorProp === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(validatorProp(valueToValidate))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they where operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      if (valueToValidate === emptyValue && required) {\n        const error = new FormError('The value is required', {\n          validationRule: 'required',\n        }) // TO DO: Lib-specific translations\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else if (schemaValidator) {\n        // This input has a direct schema (through props)\n        if (valueToValidate === undefined && emptyValue === undefined) {\n          // Avoid validating undefined-values if they are expected (set with emptyValue) as they will\n          // usually fail against json-schema type\n          setErrorAndUpdateDataContext(undefined)\n          return undefined\n        }\n        schemaValidator(valueToValidate)\n        const error = ajvErrorsToOneFormError(schemaValidator.errors)\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else {\n        // Removing any previous error from required\n        setErrorAndUpdateDataContext(undefined)\n        return undefined\n      }\n    },\n    [\n      schemaValidator,\n      emptyValue,\n      required,\n      setErrorAndUpdateDataContext,\n      validatorProp,\n    ]\n  )\n\n  useEffect(() => {\n    // If a surrounding data context has an error for this field (by path) and no error has been set by local component validation, use the data context error\n    if (!error && path && dataContextErrors?.[path]) {\n      setErrorAndUpdateDataContext(dataContextErrors[path])\n    }\n  }, [path, dataContextErrors, error, setErrorAndUpdateDataContext])\n\n  useEffect(() => {\n    if (dataContext.showAllErrors) {\n      // If showError on a surrounding data context was changed and set to true, it is because the user clicked next, submit or\n      // something else that should lead to showing the user all errors.\n      setShowError(true)\n      setShowFieldGroupError?.(path ?? id, true);\n    }\n  }, [id, path, dataContext.showAllErrors, setShowFieldGroupError])\n\n  const onFocus = useCallback(\n    ({ onFocusValue }) => {\n      onFocusProp?.(onFocusValue ?? value)\n    },\n    [value, onFocusProp]\n  )\n\n  const onBlur = useCallback(\n    ({ onBlurValue }) => {\n      onBlurProp?.(onBlurValue ?? value)\n\n      if (!changedRef.current && !validateUnchanged) {\n        // Avoid showing errors when blurring without havinc hanged the value, so tabbing through several\n        // fields does not make errors pop up all over the place\n        return\n      }\n\n      // External blur validators makes it possible to validate values but not on every character change in case of\n      // expensive validation calling external services etc.\n      if (typeof onBlurValidatorProp === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(onBlurValidatorProp(onBlurValue ?? value))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they where operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      // Since the user left the field, show error (if any)\n      setShowError(true)\n      setShowFieldGroupError?.(path ?? id, true);\n    },\n    [\n      id,\n      path,\n      value,\n      onBlurProp,\n      validateUnchanged,\n      onBlurValidatorProp,\n      setErrorAndUpdateDataContext,\n      setShowFieldGroupError,\n    ]\n  )\n\n  const onChange = useCallback(\n    (valueFromInput) => {\n      const newValue = fromInput(valueFromInput)\n      setValue(newValue)\n      changedRef.current = true\n      // When changing the value, hide errors to avoid annoying the user before they are finished filling in that value\n      setShowError(false)\n      setShowFieldGroupError?.(path ?? id, false);\n      // Always validate the value immediately when it is changed\n      validateValue(newValue)\n\n      // Tell any parent data context about the error, so they can take it into consideration when a submit button is clicked for instance\n      onChangeProp?.(newValue)\n      if (path) {\n        dataContextHandlePathChange?.(path, newValue)\n      }\n    },\n    [\n      id,\n      path,\n      onChangeProp,\n      validateValue,\n      dataContextHandlePathChange,\n      setShowFieldGroupError,\n      fromInput,\n    ]\n  )\n\n  const exportError = useMemo(() =>\n    errorProp ??\n    error\n  , [errorProp, error]);\n\n  useEffect(() => {\n    // Mount procedure\n    if (path) {\n      dataContext?.handleMountField(path)\n    }\n    validateValue(externalValue)\n\n    return () => {\n      // Unmount procedure\n      if (path) {\n        dataContext?.handleUnMountField(path)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return {\n    ...props,\n    id,\n    value: toInput(value),\n    error: inFieldGroup ? undefined : (showError ? exportError : undefined),\n    onFocus,\n    onBlur,\n    onChange,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useField.js","names":["useRef","useEffect","useContext","useCallback","useMemo","useState","pointer","FormError","ajv","ajvErrorsToOneFormError","DataContext","FieldGroupContext","makeUniqueId","useField","props","path","emptyValue","required","error","errorProp","onFocus","onBlur","onChange","validator","onBlurValidator","schema","errorMessages","validateInitially","validateUnchanged","toInput","value","fromInput","id","dataContext","Context","fieldGroupContext","inFieldGroup","Boolean","setFieldError","setFieldGroupError","setShowFieldError","setShowFieldGroupError","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","substring","Error","externalValue","data","undefined","has","get","setValue","changedRef","setError","showError","setShowError","schemaValidator","Object","keys","length","compile","setErrorAndUpdateDataContext","errorWithCorrectMessage","validationRule","validateValue","valueToValidate","Promise","resolve","then","showAllErrors","setHasFocus","hasFocus","valueOverride","current","handleFocus","handleBlur","handleChange","argFromInput","newValue","exportError","handleMountField","handleUnMountField","_objectSpread"],"sources":["../../../../../../src/extensions/forms/Field/hooks/useField.ts"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useContext,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport pointer from 'json-pointer'\nimport { FormError } from '../../types'\nimport ajv, { ajvErrorsToOneFormError } from '../../utils/ajv'\nimport DataContext from '../../DataContext'\nimport type { FieldProps } from '../../field-types'\nimport { FieldGroupContext } from '../../FieldGroup'\nimport { makeUniqueId } from '../../../../shared/component-helper'\n\ninterface ReturnAdditional {\n  setHasFocus: (hasFocus: boolean, valueOverride?: unknown) => void\n  handleFocus: FieldProps<unknown>['onFocus']\n  handleBlur: FieldProps<unknown>['onBlur']\n  handleChange: FieldProps<unknown>['onChange']\n}\n\nexport default function useField<Props extends FieldProps<unknown>>(\n  props: Props\n): Props & ReturnAdditional {\n  const {\n    path,\n    emptyValue,\n    required,\n    error: errorProp,\n    onFocus,\n    onBlur,\n    onChange,\n    validator,\n    onBlurValidator,\n    schema,\n    errorMessages,\n    validateInitially,\n    validateUnchanged,\n    toInput = (value) => value,\n    fromInput = (value) => value,\n  } = props\n  const id = useMemo(() => props.id ?? makeUniqueId(), [props.id])\n  const dataContext = useContext(DataContext.Context)\n  const fieldGroupContext = useContext(FieldGroupContext)\n  const inFieldGroup = Boolean(fieldGroupContext)\n  const {\n    setFieldError: setFieldGroupError,\n    setShowFieldError: setShowFieldGroupError,\n  } = fieldGroupContext ?? {}\n  const {\n    handlePathChange: dataContextHandlePathChange,\n    setPathWithError: dataContextSetPathWithError,\n    errors: dataContextErrors,\n  } = dataContext ?? {}\n\n  if (path && path.substring(0, 1) !== '/') {\n    throw new Error(\n      'Invalid path. Input path JSON Pointers  must be from root (starting with a /).'\n    )\n  }\n\n  const externalValue = useMemo(() => {\n    return (\n      props.value ??\n      (dataContext.data &&\n      path !== undefined &&\n      pointer.has(dataContext.data, path)\n        ? pointer.get(dataContext.data, path)\n        : undefined)\n    )\n  }, [path, props.value, dataContext.data])\n\n  // Hold an internal copy of the input value in case the input component is used uncontrolled,\n  // and to handle errors in Eufemia on components that does not take updated callback functions into account.\n  const [value, setValue] = useState(externalValue)\n  const changedRef = useRef(false)\n\n  useEffect(() => {\n    // When receiving the initial value, or receiving an updated value by props, update the internal value\n    // so the component can be used \"controlled\".\n    setValue(externalValue)\n  }, [externalValue])\n\n  // Error handling\n  const [error, setError] = useState<Error | FormError | undefined>()\n  const [showError, setShowError] = useState<boolean>(\n    Boolean(validateInitially || errorProp)\n  )\n  const schemaValidator = useMemo(\n    () =>\n      schema && Object.keys(schema).length > 0\n        ? ajv.compile(schema)\n        : undefined,\n    [schema]\n  )\n\n  const setErrorAndUpdateDataContext = useCallback(\n    (error: FormError | undefined) => {\n      const errorWithCorrectMessage =\n        error instanceof FormError &&\n        typeof error.validationRule === 'string' &&\n        errorMessages?.[error.validationRule] !== undefined\n          ? new FormError(errorMessages[error.validationRule])\n          : error\n\n      setError(errorWithCorrectMessage)\n\n      if (path) {\n        // Tell the data context about the error, so it can stop the user from submitting the form until the error has been fixed\n        dataContextSetPathWithError?.(path, Boolean(error))\n      }\n\n      setFieldGroupError?.(path ?? id, errorWithCorrectMessage)\n    },\n    [\n      path,\n      id,\n      errorMessages,\n      dataContextSetPathWithError,\n      setFieldGroupError,\n    ]\n  )\n\n  const validateValue = useCallback(\n    (valueToValidate): FormError | undefined => {\n      // Prioritize received validator functions first\n      // Possible future change: Merge errors if multiple, like one message with each message concatinated.\n      if (typeof validator === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(validator(valueToValidate))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they where operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      if (valueToValidate === emptyValue && required) {\n        const error = new FormError('The value is required', {\n          validationRule: 'required',\n        }) // TO DO: Lib-specific translations\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else if (schemaValidator) {\n        // This input has a direct schema (through props)\n        if (valueToValidate === undefined && emptyValue === undefined) {\n          // Avoid validating undefined-values if they are expected (set with emptyValue) as they will\n          // usually fail against json-schema type\n          setErrorAndUpdateDataContext(undefined)\n          return undefined\n        }\n        schemaValidator(valueToValidate)\n        const error = ajvErrorsToOneFormError(schemaValidator.errors)\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else {\n        // Removing any previous error from required\n        setErrorAndUpdateDataContext(undefined)\n        return undefined\n      }\n    },\n    [\n      schemaValidator,\n      emptyValue,\n      required,\n      setErrorAndUpdateDataContext,\n      validator,\n    ]\n  )\n\n  useEffect(() => {\n    // If a surrounding data context has an error for this field (by path) and no error has been set by local component validation, use the data context error\n    if (!error && path && dataContextErrors?.[path]) {\n      setErrorAndUpdateDataContext(dataContextErrors[path])\n    }\n  }, [path, dataContextErrors, error, setErrorAndUpdateDataContext])\n\n  useEffect(() => {\n    if (dataContext.showAllErrors) {\n      // If showError on a surrounding data context was changed and set to true, it is because the user clicked next, submit or\n      // something else that should lead to showing the user all errors.\n      setShowError(true)\n      setShowFieldGroupError?.(path ?? id, true)\n    }\n  }, [id, path, dataContext.showAllErrors, setShowFieldGroupError])\n\n  const setHasFocus = useCallback(\n    (hasFocus: boolean, valueOverride?: unknown) => {\n      if (hasFocus) {\n        // Field was put in focus (like when clicking in a text field or opening a dropdown menu)\n        onFocus?.(valueOverride ?? value)\n      } else {\n        // Field was removed from focus (like when tabbing out of a text field or closing a dropdown menu)\n        onBlur?.(valueOverride ?? value)\n\n        if (!changedRef.current && !validateUnchanged) {\n          // Avoid showing errors when blurring without havinc hanged the value, so tabbing through several\n          // fields does not make errors pop up all over the place\n          return\n        }\n\n        // External blur validators makes it possible to validate values but not on every character change in case of\n        // expensive validation calling external services etc.\n        if (typeof onBlurValidator === 'function') {\n          // Since the validator can return either a synchronous result or an asynchronous\n          Promise.resolve(onBlurValidator(valueOverride ?? value))\n            // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n            // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n            // as if they where operational errors.\n            .then(setErrorAndUpdateDataContext)\n        }\n\n        // Since the user left the field, show error (if any)\n        setShowError(true)\n        setShowFieldGroupError?.(path ?? id, true)\n      }\n    },\n    [\n      id,\n      path,\n      value,\n      validateUnchanged,\n      onFocus,\n      onBlur,\n      onBlurValidator,\n      setErrorAndUpdateDataContext,\n      setShowFieldGroupError,\n    ]\n  )\n\n  const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus])\n  const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus])\n\n  const handleChange = useCallback(\n    (argFromInput) => {\n      const newValue = fromInput(argFromInput)\n      if (newValue === value) {\n        // Avoid triggering a change if the value was not actually changed. This may be caused by rendering components\n        // calling onChange even if the actual value did not change.\n        return\n      }\n      setValue(newValue)\n      changedRef.current = true\n      // When changing the value, hide errors to avoid annoying the user before they are finished filling in that value\n      setShowError(false)\n      setShowFieldGroupError?.(path ?? id, false)\n      // Always validate the value immediately when it is changed\n      validateValue(newValue)\n\n      // Tell any parent data context about the error, so they can take it into consideration when a submit button is clicked for instance\n      onChange?.(newValue)\n      if (path) {\n        dataContextHandlePathChange?.(path, newValue)\n      }\n    },\n    [\n      id,\n      path,\n      value,\n      onChange,\n      validateValue,\n      dataContextHandlePathChange,\n      setShowFieldGroupError,\n      fromInput,\n    ]\n  )\n\n  const exportError = useMemo(() => errorProp ?? error, [errorProp, error])\n\n  useEffect(() => {\n    // Mount procedure\n    if (path) {\n      dataContext?.handleMountField(path)\n    }\n    validateValue(externalValue)\n\n    return () => {\n      // Unmount procedure\n      if (path) {\n        dataContext?.handleUnMountField(path)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return {\n    ...props,\n    id,\n    value: toInput(value),\n    error: inFieldGroup ? undefined : showError ? exportError : undefined,\n    setHasFocus,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  }\n}\n"],"mappings":"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"}

package/es/extensions/forms/Field/index.d.ts

@@ -16,6 +16,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 declare const Field: {
     String: typeof StringComponent;
     Number: typeof NumberComponent;
@@ -35,5 +36,6 @@ declare const Field: {
     Option: typeof Option;
     SelectCountry: typeof SelectCountry;
     BankAccountNumber: typeof BankAccountNumber;
+    CountryCode: typeof CountryCode;
 };
 export default Field;

package/es/extensions/forms/Field/index.js

@@ -16,6 +16,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 const Field = {
   String: StringComponent,
   Number: NumberComponent,
@@ -34,7 +35,8 @@ const Field = {
   ArraySelection,
   Option,
   SelectCountry,
-  BankAccountNumber
+  BankAccountNumber,
+  CountryCode
 };
 export default Field;
 //# sourceMappingURL=index.js.map

package/es/extensions/forms/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Field","String","Number","Boolean","Date"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport FirstName from './FirstName'\nimport LastName from './LastName'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection';\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  FirstName,\n  LastName,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n}\n\nexport default Field\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAEnB,eAAe;EACvBoB,MAAM,EAAEnB,eAAe;EACvBC,MAAM;EACNmB,OAAO,EAAElB,gBAAgB;EACzBC,QAAQ;EACRkB,IAAI,EAAEjB,aAAa;EACnBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC;AACF,CAAC;AAED,eAAeC,KAAK"}
+{"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","CountryCode","Field","String","Number","Boolean","Date"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport FirstName from './FirstName'\nimport LastName from './LastName'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection'\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\nimport CountryCode from './CountryCode'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  FirstName,\n  LastName,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n  CountryCode,\n}\n\nexport default Field\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAEpB,eAAe;EACvBqB,MAAM,EAAEpB,eAAe;EACvBC,MAAM;EACNoB,OAAO,EAAEnB,gBAAgB;EACzBC,QAAQ;EACRmB,IAAI,EAAElB,aAAa;EACnBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC,iBAAiB;EACjBC;AACF,CAAC;AAED,eAAeC,KAAK"}

package/es/extensions/forms/Field/style/dnb-array-selection.css

@@ -0,0 +1,13 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}

package/es/extensions/forms/Field/style/dnb-array-selection.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}

package/es/extensions/forms/Field/style/dnb-array-selection.scss

@@ -0,0 +1,15 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-array-selection {
+  &--options-layout-vertical &__options {
+    display: flex;
+    flex-flow: column;
+    row-gap: var(--spacing-x-small);
+  }
+
+  &--options-layout-horizontal &__options {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: var(--spacing-small);
+  }
+}

package/es/extensions/forms/Field/style/dnb-country-code.css

@@ -0,0 +1,12 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
+}

package/es/extensions/forms/Field/style/dnb-country-code.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}

package/es/extensions/forms/Field/style/dnb-country-code.scss

@@ -0,0 +1,19 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-country-code {
+  .dnb-autocomplete__inner {
+    --autocomplete-width: 9rem;
+  }
+
+  &--width-small .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-small};
+  }
+
+  &--width-medium .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-medium};
+  }
+
+  &--width-large .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-large};
+  }
+}

package/es/extensions/forms/Field/style/dnb-phone-number.css

@@ -5,18 +5,17 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
-.dnb-forms-field-phone-number--width-large {
-  width: 336px;
+.dnb-forms-field-phone-number--width-stretch {
+  width: 100%;
 }
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+.dnb-forms-field-phone-number--width-large {
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;

package/es/extensions/forms/Field/style/dnb-phone-number.min.css

@@ -1 +1 @@
-.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}
+.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}

package/es/extensions/forms/Field/style/dnb-phone-number.scss

@@ -1,24 +1,23 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-phone-number {
   display: flex;
   flex-flow: row;
   column-gap: var(--spacing-small);
 
-  &--width-large {
-    width: $forms-field-width-large;
+  &--width-stretch {
+    width: 100%;
   }
 
-  &--width-medium {
-    width: $forms-field-width-medium;
+  &--width-large {
+    width: $forms-field-width-large;
   }
 
   &__country-code {
-    --autocomplete-width: 145px;
-    flex: 0 144px;
+    flex: 0 9rem;
 
     .dnb-autocomplete__shell {
-      width: 144px;
+      width: 9rem;
     }
   }
 

package/es/extensions/forms/Field/style/dnb-postal-code-and-city.css

@@ -5,11 +5,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;

package/es/extensions/forms/Field/style/dnb-postal-code-and-city.min.css

@@ -1 +1 @@
-.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}
+.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

package/es/extensions/forms/Field/style/dnb-postal-code-and-city.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-postal-code-and-city {
   &__fields {
@@ -7,6 +7,10 @@
     column-gap: var(--spacing-small);
   }
 
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
   &--width-medium {
     width: $forms-field-width-medium;
   }

package/es/extensions/forms/Field/style/dnb-selection.css

@@ -1,6 +1,9 @@
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
 }

package/es/extensions/forms/Field/style/dnb-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:21rem}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:11rem}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:5rem}

package/es/extensions/forms/Field/style/dnb-selection.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-selection {
   &--width-large {
@@ -12,4 +12,10 @@
       width: $forms-field-width-medium;
     }
   }
+
+  &--width-small {
+    .dnb-dropdown__shell {
+      width: $forms-field-width-small;
+    }
+  }
 }

package/es/extensions/forms/Field/style/index.d.ts

@@ -2,5 +2,6 @@
  * Web Style Import
  *
  */
-import './dnb-national-identity-number.scss';
 import './dnb-phone-number.scss';
+import './dnb-postal-code-and-city.scss';
+import './dnb-selection.scss';

package/es/extensions/forms/Field/style/index.js

@@ -1,3 +1,4 @@
-import "./dnb-national-identity-number.min.css";
 import "./dnb-phone-number.min.css";
+import "./dnb-postal-code-and-city.min.css";
+import "./dnb-selection.min.css";
 //# sourceMappingURL=index.js.map

package/es/extensions/forms/Field/style/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/extensions/forms/Field/style/index.ts"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-national-identity-number.scss'\nimport './dnb-phone-number.scss'\n"],"mappings":"AAKA,OAAO,wCAAqC;AAC5C,OAAO,4BAAyB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/extensions/forms/Field/style/index.ts"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-phone-number.scss'\nimport './dnb-postal-code-and-city.scss'\nimport './dnb-selection.scss'\n"],"mappings":"AAKA,OAAO,4BAAyB;AAChC,OAAO,oCAAiC;AACxC,OAAO,yBAAsB"}

package/es/extensions/forms/Field/style/index.scss

@@ -1,5 +1,5 @@
-@import './dnb-number.scss';
 @import './dnb-phone-number.scss';
 @import './dnb-postal-code-and-city.scss';
 @import './dnb-selection.scss';
-@import './dnb-string.scss';
+@import './dnb-array-selection.scss';
+@import './dnb-country-code.scss';

package/es/extensions/forms/FieldBlock/FieldBlock.d.ts

@@ -3,7 +3,12 @@ import type { ComponentProps } from '../component-types';
 import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & Pick<FieldProps, 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
     forId?: string;
+    contentClassName?: string;
     children: React.ReactNode;
+    /** Width of outer block element */
+    width?: 'small' | 'medium' | 'large';
+    /** Width of contents block, while label etc can be wider if space is available */
+    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function FieldBlock(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldBlock {

package/es/extensions/forms/FieldBlock/FieldBlock.js

@@ -16,15 +16,18 @@ function FieldBlock(props) {
     info,
     warning,
     error,
+    width,
+    contentsWidth,
+    contentClassName,
     children
   } = props;
+  const cn = classnames(`dnb-forms-field-block dnb-forms-field-block--layout-${layout}`, className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   return React.createElement(Div, _extends({
-    className: classnames('dnb-forms-field-block', className)
+    className: cn
   }, forwardSpaceProps(props)), labelDescription || labelSecondary ? React.createElement("div", {
-    className: "dnb-forms-field-block__label-block"
+    className: 'dnb-forms-field-block__label'
   }, label || labelDescription ? React.createElement(FormLabel, {
     for_id: forId,
-    label_direction: layout,
     space: {
       bottom: 'x-small'
     }
@@ -34,11 +37,14 @@ function FieldBlock(props) {
     className: "dnb-forms-field-block__label-secondary"
   }, labelSecondary)) : label && React.createElement(FormLabel, {
     for_id: forId,
-    label_direction: layout,
     space: {
       bottom: 'x-small'
     }
-  }, label), children, error && React.createElement(FormStatus, {
+  }, label), React.createElement("div", {
+    className: classnames('dnb-forms-field-block__contents', contentClassName, contentsWidth !== undefined && `dnb-forms-field-block__contents--width-${contentsWidth}`)
+  }, children), error && React.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, React.createElement(FormStatus, {
     state: "error",
     id: forId ? `${forId}-form-status` : undefined,
     text: error === null || error === void 0 ? void 0 : error.message,
@@ -46,15 +52,19 @@ function FieldBlock(props) {
     space: {
       top: 'x-small'
     }
-  }), warning && React.createElement(FormStatus, {
+  })), warning && React.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, React.createElement(FormStatus, {
     state: "warn",
     id: forId ? `${forId}-form-status` : undefined,
-    text: warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (info === null || info === void 0 ? void 0 : info.toString()),
+    text: warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()),
     label: label,
     space: {
       top: 'x-small'
     }
-  }), info && React.createElement(FormStatus, {
+  })), info && React.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, React.createElement(FormStatus, {
     state: "info",
     id: forId ? `${forId}-form-status` : undefined,
     text: info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString()),
@@ -62,7 +72,7 @@ function FieldBlock(props) {
     space: {
       top: 'x-small'
     }
-  }));
+  })));
 }
 FieldBlock._supportsEufemiaSpacingProps = true;
 export default FieldBlock;

package/es/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","children","createElement","_extends","for_id","label_direction","space","bottom","Fragment","state","id","undefined","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    children,\n  } = props\n\n  return (\n    <Div\n      className={classnames('dnb-forms-field-block', className)}\n      {...forwardSpaceProps(props)}\n    >\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      {children}\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","width","contentsWidth","contentClassName","children","cn","undefined","createElement","_extends","for_id","space","bottom","Fragment","state","id","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    contentClassName?: string\n    children: React.ReactNode\n    /** Width of outer block element */\n    width?: 'small' | 'medium' | 'large'\n    /** Width of contents block, while label etc can be wider if space is available */\n    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    width,\n    contentsWidth,\n    contentClassName,\n    children,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    `dnb-forms-field-block--layout-${layout}`,\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {labelDescription || labelSecondary ? (\n        <div className={classnames('dnb-forms-field-block__label')}>\n          {label || labelDescription ? (\n            <FormLabel for_id={forId} space={{ bottom: 'x-small' }}>\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel for_id={forId} space={{ bottom: 'x-small' }}>\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      <div\n        className={classnames(\n          'dnb-forms-field-block__contents',\n          contentsWidth !== undefined &&\n            `dnb-forms-field-block__contents--width-${contentsWidth}`,\n          contentClassName\n        )}\n      >\n        {children}\n      </div>\n\n      {error && (\n        <div className=\"dnb-forms-field-block__status\">\n          <FormStatus\n            state=\"error\"\n            id={forId ? `${forId}-form-status` : undefined}\n            text={error?.message}\n            label={label}\n            space={{ top: 'x-small' }}\n          />\n        </div>\n      )}\n      {warning && (\n        <div className=\"dnb-forms-field-block__status\">\n          <FormStatus\n            state=\"warn\"\n            id={forId ? `${forId}-form-status` : undefined}\n            text={\n              (warning instanceof Error && warning.message) ||\n              (warning instanceof FormError && warning.message) ||\n              warning?.toString()\n            }\n            label={label}\n            space={{ top: 'x-small' }}\n          />\n        </div>\n      )}\n      {info && (\n        <div className=\"dnb-forms-field-block__status\">\n          <FormStatus\n            state=\"info\"\n            id={forId ? `${forId}-form-status` : undefined}\n            text={\n              (info instanceof Error && info.message) ||\n              (info instanceof FormError && info.message) ||\n              info?.toString()\n            }\n            label={label}\n            space={{ top: 'x-small' }}\n          />\n        </div>\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}