@dnb/eufemia 10.32.0 → 10.34.0

package/extensions/forms/FieldBlock/FieldBlock.js

@@ -3,13 +3,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "forId", "layout", "composition", "label", "labelDescription", "asFieldset", "info", "warning", "error", "fieldState", "disabled", "width", "contentWidth", "labelSize", "contentClassName", "children"];
+const _excluded = ["className", "forId", "layout", "composition", "label", "labelDescription", "asFieldset", "info", "warning", "error", "fieldState", "disabled", "width", "contentWidth", "align", "labelSize", "contentClassName", "children"];
 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; }
 import React, { useMemo, useContext, useCallback, useRef, useReducer, useEffect } from 'react';
 import classnames from 'classnames';
 import FieldBlockContext from './FieldBlockContext';
 import DataContext from '../DataContext/Context';
+import IterateElementContext from '../Iterate/IterateElementContext';
 import { Space, FormLabel, FormStatus } from '../../../components';
 import { Ul, Li } from '../../../elements';
 import { convertJsxToString, findElementInChildren, warn } from '../../../shared/component-helper';
@@ -30,7 +31,7 @@ function FieldBlock(props) {
       forId,
       layout = 'vertical',
       composition,
-      label,
+      label: labelProp,
       labelDescription,
       asFieldset,
       info,
@@ -40,11 +41,16 @@ function FieldBlock(props) {
       disabled,
       width,
       contentWidth,
+      align,
       labelSize,
       contentClassName,
       children
     } = _Object$assign,
     rest = _objectWithoutProperties(_Object$assign, _excluded);
+  const iterateElementContext = useContext(IterateElementContext);
+  const {
+    index: iterateIndex
+  } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
   const blockId = useId(props.id);
   const [wasUpdated, forceUpdate] = useReducer(() => ({}), {});
   const mountedFieldsRef = useRef({});
@@ -54,6 +60,12 @@ function FieldBlock(props) {
   const hasInitiallyErrorProp = useMemo(() => {
     return Boolean(errorProp);
   }, []);
+  const label = useMemo(() => {
+    if (iterateIndex !== undefined) {
+      return convertJsxToString(labelProp).replace('{itemNr}', String(iterateIndex + 1));
+    }
+    return labelProp;
+  }, [iterateIndex, labelProp]);
   const setInternalRecord = useCallback(props => {
     const {
       stateId,
@@ -258,7 +270,7 @@ function FieldBlock(props) {
   }, labelDescription)))), React.createElement("div", {
     className: "dnb-forms-field-block__status"
   }, React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.error), React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.warning), React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.info)), React.createElement("div", {
-    className: classnames('dnb-forms-field-block__contents', contentClassName, contentWidth !== undefined && `dnb-forms-field-block__contents--width-${contentWidth}`, composition !== undefined && `dnb-forms-field-block__contents__composition--${composition === true ? 'horizontal' : composition}`),
+    className: classnames('dnb-forms-field-block__contents', contentClassName, contentWidth && `dnb-forms-field-block__contents--width-${contentWidth}`, align && `dnb-forms-field-block__contents--align-${align}`, composition && `dnb-forms-field-block__contents__composition--${composition === true ? 'horizontal' : composition}`),
     ref: contentsRef
   }, children))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useCallback","useRef","useReducer","useEffect","classnames","FieldBlockContext","DataContext","Space","FormLabel","FormStatus","Ul","Li","convertJsxToString","findElementInChildren","warn","useId","useUnmountEffect","FormError","SubmitIndicator","createSharedState","useTranslation","states","FieldBlock","props","dataContext","nestedFieldBlockContext","sharedData","forId","id","_Object$assign","Object","assign","data","className","layout","composition","label","labelDescription","asFieldset","info","warning","error","errorProp","fieldState","disabled","width","contentWidth","labelSize","contentClassName","children","rest","_objectWithoutProperties","_excluded","blockId","wasUpdated","forceUpdate","mountedFieldsRef","stateRecordRef","fieldStateIdsRef","contentsRef","hasInitiallyErrorProp","Boolean","setInternalRecord","stateId","identifier","type","current","existingIndex","findIndex","item","_objectSpread","push","setFieldState","showFieldError","show","map","showInitially","statusContent","content","statesWithMessages","entries","flatMap","_ref","reduce","acc","cur","existing","find","message","getMessage","messages","undefined","state","width_element","no_animation","process","env","NODE_ENV","globalThis","IS_TEST","found","msg","filter","_ref2","i","arr","length","text","createElement","CombineMessages","mainClasses","gridClasses","enableFieldset","useEnableFieldset","labelProps","element","space","top","bottom","size","prerenderFieldProps","Provider","value","hasErrorProp","_extends","LabelDescription","ref","_ref3","result","count","child","_child$props","_child$type","_ref4","translations","Field","Fragment","errorSummary","stateSummary","_ref5","key","_ref6","Error","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useEffect,\n} from 'react'\nimport classnames from 'classnames'\n\nimport FieldBlockContext, {\n  StateWithMessage,\n  StatesWithMessages,\n  FieldErrorIdsRef,\n  MountedFieldsRef,\n  StateRecord,\n  StateMessage,\n  StateTypes,\n  StatusContent,\n  FieldBlockContextProps,\n  StateBasis,\n} from './FieldBlockContext'\nimport DataContext from '../DataContext/Context'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { Ul, Li } from '../../../elements'\nimport {\n  convertJsxToString,\n  findElementInChildren,\n  warn,\n} from '../../../shared/component-helper'\nimport useId from '../../../shared/helpers/useId'\nimport useUnmountEffect from '../../../shared/helpers/useUnmountEffect'\nimport {\n  ComponentProps,\n  FieldProps,\n  FormError,\n  SubmitState,\n  Identifier,\n  FieldBlockWidth,\n} from '../types'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\nimport SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator'\nimport { createSharedState } from '../../../shared/helpers/useSharedState'\nimport useTranslation from '../hooks/useTranslation'\n\nexport const states: Array<StateTypes> = ['error', 'info', 'warning']\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  /** The id to link a element with */\n  forId?: string\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Defines the layout of nested fields */\n  composition?: FieldBlockContextProps['composition']\n  /** Width of outer block element */\n  width?: FieldBlockWidth\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentWidth?: FieldBlockWidth\n  contentClassName?: string\n  /** To show the SubmitIndicator during async validation */\n  fieldState?: SubmitState\n  /** Typography size */\n  labelSize?: 'medium' | 'large'\n  children: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const dataContext = useContext(DataContext)\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const sharedData = createSharedState<Props>(props.forId || props.id)\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    composition,\n    label,\n    labelDescription,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    fieldState,\n    disabled,\n    width,\n    contentWidth,\n    labelSize,\n    contentClassName,\n    children,\n    ...rest\n  } = Object.assign({}, sharedData.data, props)\n\n  const blockId = useId(props.id)\n  const [wasUpdated, forceUpdate] = useReducer(() => ({}), {})\n  const mountedFieldsRef = useRef<MountedFieldsRef>({})\n  const stateRecordRef = useRef<StateRecord>({})\n  const fieldStateIdsRef = useRef<FieldErrorIdsRef>(null)\n  const contentsRef = useRef<HTMLDivElement>(null)\n  const hasInitiallyErrorProp = useMemo(() => {\n    return Boolean(errorProp)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const setInternalRecord = useCallback((props: StateBasis) => {\n    const { stateId, identifier, type } = props\n\n    if (!stateRecordRef.current[identifier]) {\n      stateRecordRef.current[identifier] = []\n    }\n\n    fieldStateIdsRef.current = { error: null, warning: null, info: null }\n\n    const existingIndex = stateRecordRef.current[identifier].findIndex(\n      (item) => {\n        return item.stateId === stateId && item.type === type\n      }\n    )\n\n    if (existingIndex > -1) {\n      stateRecordRef.current[identifier][existingIndex] = {\n        ...stateRecordRef.current[identifier][existingIndex],\n        ...props,\n      }\n    } else {\n      stateRecordRef.current[identifier].push(props)\n    }\n  }, [])\n\n  const setFieldState = useCallback(\n    (props: StateBasis) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setFieldState(props)\n        return\n      }\n\n      setInternalRecord(props)\n\n      forceUpdate()\n    },\n    [nestedFieldBlockContext, setInternalRecord]\n  )\n\n  const showFieldError = useCallback(\n    (identifier: Identifier, show: boolean) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.showFieldError(identifier, show)\n        return\n      }\n\n      if (stateRecordRef.current[identifier]) {\n        stateRecordRef.current[identifier] = stateRecordRef.current[\n          identifier\n        ].map((item) => {\n          if (item.showInitially) {\n            return item\n          }\n\n          return {\n            ...item,\n            show,\n          }\n        })\n\n        forceUpdate()\n      }\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const statusContent = useMemo(() => {\n    if (typeof errorProp !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: hasInitiallyErrorProp,\n        type: 'error',\n        content: errorProp,\n      })\n    }\n\n    if (typeof warning !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'warning',\n        content: warning,\n      })\n    }\n\n    if (typeof info !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'info',\n        content: info,\n      })\n    }\n\n    const statesWithMessages: Array<StatesWithMessages> =\n      // 1. Prepare the states for later use\n      Object.entries(stateRecordRef.current)\n        .flatMap(([identifier, states]) =>\n          states.map((props) => {\n            return {\n              identifier,\n              ...props,\n            }\n          })\n        )\n\n        // 2. Take states and group the same type together\n        .reduce((acc, cur) => {\n          const existing = acc.find((item) => {\n            return item.type === cur.type\n          })\n\n          const message = getMessage(cur)\n\n          if (existing) {\n            existing.messages.push({\n              ...cur,\n              message,\n            })\n          } else {\n            acc.push({\n              ...cur,\n              content: undefined,\n              messages: [\n                {\n                  ...cur,\n                  message,\n                },\n              ],\n            })\n          }\n\n          return acc\n        }, [] as Array<StatesWithMessages>)\n\n    // 3. Return the grouped states/messages\n    return states.reduce((acc, type) => {\n      const id = `${props.id || forId || blockId}-form-status--${type}`\n      acc[type] = {\n        id,\n        label,\n        state: type === 'warning' ? 'warn' : type,\n        width_element: contentsRef,\n\n        // Enable animation only in the browser and not in tests\n        no_animation:\n          process.env.NODE_ENV === 'test'\n            ? true\n            : typeof globalThis !== 'undefined'\n            ? globalThis.IS_TEST === true\n            : false,\n      }\n\n      const found = statesWithMessages.find((item) => {\n        return item.type === type\n      })\n\n      if (found?.messages) {\n        // Hide/remove messages that should be hidden and are not marked as to be shown initially\n        const messages = found.messages\n          .map((msg) => {\n            if (msg.type === 'error') {\n              if (!msg.showInitially && !msg.show) {\n                msg.message = null\n              }\n            }\n\n            return msg\n          })\n          .filter(({ message }) => message)\n          .reduce((acc, msg, i, arr) => {\n            const existingIndex = arr.findIndex((item) => {\n              return (\n                convertJsxToString(item.message) ===\n                convertJsxToString(msg.message)\n              )\n            })\n\n            // Remove duplicates, use the first found message\n            if (existingIndex === i) {\n              acc.push(msg)\n            }\n\n            return acc\n          }, [])\n\n        // Combine the messages and put them in an ul/li list\n        if (messages.length > 0) {\n          acc[type] = {\n            ...acc[type],\n            text: <CombineMessages type={type} messages={messages} />,\n          }\n\n          fieldStateIdsRef.current[type] = id\n        } else {\n          fieldStateIdsRef.current[type] = undefined\n        }\n      }\n\n      return acc\n    }, {}) as StatusContent\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    info,\n    warning,\n    errorProp,\n    nestedFieldBlockContext,\n    setInternalRecord,\n    blockId,\n    wasUpdated, // wasUpdated is needed to get the current errors\n  ])\n\n  // Handle the error prop from outside\n  useEffect(() => {\n    if (!nestedFieldBlockContext) {\n      showFieldError(blockId, Boolean(errorProp))\n    }\n  }, [errorProp, blockId, showFieldError, nestedFieldBlockContext])\n\n  useUnmountEffect(() => () => {\n    mountedFieldsRef.current = {}\n    stateRecordRef.current = {}\n  })\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const labelProps: FormLabelAllProps = {\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    space: { top: 0, bottom: 'x-small' },\n    size: labelSize,\n    disabled,\n  }\n\n  if (dataContext?.prerenderFieldProps) {\n    return null\n  }\n\n  if (fieldState && !label) {\n    warn('You have to provide a label to use show an indicator.')\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setFieldState,\n        showFieldError,\n        hasErrorProp: Boolean(errorProp),\n        fieldStateIdsRef,\n        mountedFieldsRef,\n        composition,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          <LabelDescription labelDescription={labelDescription}>\n            {(label || labelDescription) && (\n              <FormLabel {...labelProps}>\n                <SubmitIndicator state={fieldState}>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </SubmitIndicator>\n              </FormLabel>\n            )}\n          </LabelDescription>\n\n          <div className=\"dnb-forms-field-block__status\">\n            <FormStatus {...statusContent?.error} />\n            <FormStatus {...statusContent?.warning} />\n            <FormStatus {...statusContent?.info} />\n          </div>\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentWidth}`,\n              composition !== undefined &&\n                `dnb-forms-field-block__contents__composition--${\n                  composition === true ? 'horizontal' : composition\n                }`,\n              contentClassName\n            )}\n            ref={contentsRef}\n          >\n            {children}\n          </div>\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    if (asFieldset === false) {\n      return false\n    }\n\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          child?.props?.label ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [asFieldset, children, label, nestedFieldBlockContext])\n}\n\nfunction CombineMessages({\n  type,\n  messages,\n}: {\n  type: StateTypes\n  messages: Array<StateWithMessage>\n}) {\n  const translations = useTranslation().Field\n\n  if (messages.length === 1) {\n    return <>{messages[0].message}</>\n  }\n\n  return (\n    <>\n      {type === 'error'\n        ? translations.errorSummary\n        : translations.stateSummary}\n      <Ul>\n        {messages.map(({ message }, i) => {\n          return <Li key={i}>{message}</Li>\n        })}\n      </Ul>\n    </>\n  )\n}\n\nfunction LabelDescription({ labelDescription, children }) {\n  if (!labelDescription) {\n    return children\n  }\n  return <div className=\"dnb-forms-field-block__label\">{children}</div>\n}\n\nfunction getMessage(item: Partial<StateWithMessage>): StateMessage {\n  const { content } = item\n\n  return ((content instanceof Error && content.message) ||\n    (content instanceof FormError && content.message) ||\n    content?.toString() ||\n    content) as StateMessage\n}\n\nFieldBlock._supportsSpacingProps = true\n\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useCallback","useRef","useReducer","useEffect","classnames","FieldBlockContext","DataContext","IterateElementContext","Space","FormLabel","FormStatus","Ul","Li","convertJsxToString","findElementInChildren","warn","useId","useUnmountEffect","FormError","SubmitIndicator","createSharedState","useTranslation","states","FieldBlock","props","dataContext","nestedFieldBlockContext","sharedData","forId","id","_Object$assign","Object","assign","data","className","layout","composition","label","labelProp","labelDescription","asFieldset","info","warning","error","errorProp","fieldState","disabled","width","contentWidth","align","labelSize","contentClassName","children","rest","_objectWithoutProperties","_excluded","iterateElementContext","index","iterateIndex","blockId","wasUpdated","forceUpdate","mountedFieldsRef","stateRecordRef","fieldStateIdsRef","contentsRef","hasInitiallyErrorProp","Boolean","undefined","replace","String","setInternalRecord","stateId","identifier","type","current","existingIndex","findIndex","item","_objectSpread","push","setFieldState","showFieldError","show","map","showInitially","statusContent","content","statesWithMessages","entries","flatMap","_ref","reduce","acc","cur","existing","find","message","getMessage","messages","state","width_element","no_animation","process","env","NODE_ENV","globalThis","IS_TEST","found","msg","filter","_ref2","i","arr","length","text","createElement","CombineMessages","mainClasses","gridClasses","enableFieldset","useEnableFieldset","labelProps","element","space","top","bottom","size","prerenderFieldProps","Provider","value","hasErrorProp","_extends","LabelDescription","ref","_ref3","result","count","child","_child$props","_child$type","_ref4","translations","Field","Fragment","errorSummary","stateSummary","_ref5","key","_ref6","Error","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useEffect,\n} from 'react'\nimport classnames from 'classnames'\n\nimport FieldBlockContext, {\n  StateWithMessage,\n  StatesWithMessages,\n  FieldErrorIdsRef,\n  MountedFieldsRef,\n  StateRecord,\n  StateMessage,\n  StateTypes,\n  StatusContent,\n  FieldBlockContextProps,\n  StateBasis,\n} from './FieldBlockContext'\nimport DataContext from '../DataContext/Context'\nimport IterateElementContext from '../Iterate/IterateElementContext'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { Ul, Li } from '../../../elements'\nimport {\n  convertJsxToString,\n  findElementInChildren,\n  warn,\n} from '../../../shared/component-helper'\nimport useId from '../../../shared/helpers/useId'\nimport useUnmountEffect from '../../../shared/helpers/useUnmountEffect'\nimport {\n  ComponentProps,\n  FieldProps,\n  FormError,\n  SubmitState,\n  Identifier,\n  FieldBlockWidth,\n} from '../types'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\nimport SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator'\nimport { createSharedState } from '../../../shared/helpers/useSharedState'\nimport useTranslation from '../hooks/useTranslation'\n\nexport const states: Array<StateTypes> = ['error', 'info', 'warning']\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  /** The id to link a element with */\n  forId?: string\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Defines the layout of nested fields */\n  composition?: FieldBlockContextProps['composition']\n  /** Width of outer block element */\n  width?: FieldBlockWidth\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentWidth?: FieldBlockWidth\n  /** For composition only: Align the contents vertically */\n  align?: 'center' | 'bottom'\n  /** Class name for the contents block */\n  contentClassName?: string\n  /** To show the SubmitIndicator during async validation */\n  fieldState?: SubmitState\n  /** Typography size */\n  labelSize?: 'medium' | 'large'\n  children?: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const dataContext = useContext(DataContext)\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const sharedData = createSharedState<Props>(props.forId || props.id)\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    composition,\n    label: labelProp,\n    labelDescription,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    fieldState,\n    disabled,\n    width,\n    contentWidth,\n    align,\n    labelSize,\n    contentClassName,\n    children,\n    ...rest\n  } = Object.assign({}, sharedData.data, props)\n\n  const iterateElementContext = useContext(IterateElementContext)\n  const { index: iterateIndex } = iterateElementContext ?? {}\n\n  const blockId = useId(props.id)\n  const [wasUpdated, forceUpdate] = useReducer(() => ({}), {})\n  const mountedFieldsRef = useRef<MountedFieldsRef>({})\n  const stateRecordRef = useRef<StateRecord>({})\n  const fieldStateIdsRef = useRef<FieldErrorIdsRef>(null)\n  const contentsRef = useRef<HTMLDivElement>(null)\n  const hasInitiallyErrorProp = useMemo(() => {\n    return Boolean(errorProp)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const label = useMemo(() => {\n    if (iterateIndex !== undefined) {\n      return convertJsxToString(labelProp).replace(\n        '{itemNr}',\n        String(iterateIndex + 1)\n      )\n    }\n    return labelProp\n  }, [iterateIndex, labelProp])\n\n  const setInternalRecord = useCallback((props: StateBasis) => {\n    const { stateId, identifier, type } = props\n\n    if (!stateRecordRef.current[identifier]) {\n      stateRecordRef.current[identifier] = []\n    }\n\n    fieldStateIdsRef.current = { error: null, warning: null, info: null }\n\n    const existingIndex = stateRecordRef.current[identifier].findIndex(\n      (item) => {\n        return item.stateId === stateId && item.type === type\n      }\n    )\n\n    if (existingIndex > -1) {\n      stateRecordRef.current[identifier][existingIndex] = {\n        ...stateRecordRef.current[identifier][existingIndex],\n        ...props,\n      }\n    } else {\n      stateRecordRef.current[identifier].push(props)\n    }\n  }, [])\n\n  const setFieldState = useCallback(\n    (props: StateBasis) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setFieldState(props)\n        return\n      }\n\n      setInternalRecord(props)\n\n      forceUpdate()\n    },\n    [nestedFieldBlockContext, setInternalRecord]\n  )\n\n  const showFieldError = useCallback(\n    (identifier: Identifier, show: boolean) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.showFieldError(identifier, show)\n        return\n      }\n\n      if (stateRecordRef.current[identifier]) {\n        stateRecordRef.current[identifier] = stateRecordRef.current[\n          identifier\n        ].map((item) => {\n          if (item.showInitially) {\n            return item\n          }\n\n          return {\n            ...item,\n            show,\n          }\n        })\n\n        forceUpdate()\n      }\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const statusContent = useMemo(() => {\n    if (typeof errorProp !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: hasInitiallyErrorProp,\n        type: 'error',\n        content: errorProp,\n      })\n    }\n\n    if (typeof warning !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'warning',\n        content: warning,\n      })\n    }\n\n    if (typeof info !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'info',\n        content: info,\n      })\n    }\n\n    const statesWithMessages: Array<StatesWithMessages> =\n      // 1. Prepare the states for later use\n      Object.entries(stateRecordRef.current)\n        .flatMap(([identifier, states]) =>\n          states.map((props) => {\n            return {\n              identifier,\n              ...props,\n            }\n          })\n        )\n\n        // 2. Take states and group the same type together\n        .reduce((acc, cur) => {\n          const existing = acc.find((item) => {\n            return item.type === cur.type\n          })\n\n          const message = getMessage(cur)\n\n          if (existing) {\n            existing.messages.push({\n              ...cur,\n              message,\n            })\n          } else {\n            acc.push({\n              ...cur,\n              content: undefined,\n              messages: [\n                {\n                  ...cur,\n                  message,\n                },\n              ],\n            })\n          }\n\n          return acc\n        }, [] as Array<StatesWithMessages>)\n\n    // 3. Return the grouped states/messages\n    return states.reduce((acc, type) => {\n      const id = `${props.id || forId || blockId}-form-status--${type}`\n      acc[type] = {\n        id,\n        label,\n        state: type === 'warning' ? 'warn' : type,\n        width_element: contentsRef,\n\n        // Enable animation only in the browser and not in tests\n        no_animation:\n          process.env.NODE_ENV === 'test'\n            ? true\n            : typeof globalThis !== 'undefined'\n            ? globalThis.IS_TEST === true\n            : false,\n      }\n\n      const found = statesWithMessages.find((item) => {\n        return item.type === type\n      })\n\n      if (found?.messages) {\n        // Hide/remove messages that should be hidden and are not marked as to be shown initially\n        const messages = found.messages\n          .map((msg) => {\n            if (msg.type === 'error') {\n              if (!msg.showInitially && !msg.show) {\n                msg.message = null\n              }\n            }\n\n            return msg\n          })\n          .filter(({ message }) => message)\n          .reduce((acc, msg, i, arr) => {\n            const existingIndex = arr.findIndex((item) => {\n              return (\n                convertJsxToString(item.message) ===\n                convertJsxToString(msg.message)\n              )\n            })\n\n            // Remove duplicates, use the first found message\n            if (existingIndex === i) {\n              acc.push(msg)\n            }\n\n            return acc\n          }, [])\n\n        // Combine the messages and put them in an ul/li list\n        if (messages.length > 0) {\n          acc[type] = {\n            ...acc[type],\n            text: <CombineMessages type={type} messages={messages} />,\n          }\n\n          fieldStateIdsRef.current[type] = id\n        } else {\n          fieldStateIdsRef.current[type] = undefined\n        }\n      }\n\n      return acc\n    }, {}) as StatusContent\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    info,\n    warning,\n    errorProp,\n    nestedFieldBlockContext,\n    setInternalRecord,\n    blockId,\n    wasUpdated, // wasUpdated is needed to get the current errors\n  ])\n\n  // Handle the error prop from outside\n  useEffect(() => {\n    if (!nestedFieldBlockContext) {\n      showFieldError(blockId, Boolean(errorProp))\n    }\n  }, [errorProp, blockId, showFieldError, nestedFieldBlockContext])\n\n  useUnmountEffect(() => () => {\n    mountedFieldsRef.current = {}\n    stateRecordRef.current = {}\n  })\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const labelProps: FormLabelAllProps = {\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    space: { top: 0, bottom: 'x-small' },\n    size: labelSize,\n    disabled,\n  }\n\n  if (dataContext?.prerenderFieldProps) {\n    return null\n  }\n\n  if (fieldState && !label) {\n    warn('You have to provide a label to use show an indicator.')\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setFieldState,\n        showFieldError,\n        hasErrorProp: Boolean(errorProp),\n        fieldStateIdsRef,\n        mountedFieldsRef,\n        composition,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          <LabelDescription labelDescription={labelDescription}>\n            {(label || labelDescription) && (\n              <FormLabel {...labelProps}>\n                <SubmitIndicator state={fieldState}>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </SubmitIndicator>\n              </FormLabel>\n            )}\n          </LabelDescription>\n\n          <div className=\"dnb-forms-field-block__status\">\n            <FormStatus {...statusContent?.error} />\n            <FormStatus {...statusContent?.warning} />\n            <FormStatus {...statusContent?.info} />\n          </div>\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentWidth &&\n                `dnb-forms-field-block__contents--width-${contentWidth}`,\n              align && `dnb-forms-field-block__contents--align-${align}`,\n              composition &&\n                `dnb-forms-field-block__contents__composition--${\n                  composition === true ? 'horizontal' : composition\n                }`,\n              contentClassName\n            )}\n            ref={contentsRef}\n          >\n            {children}\n          </div>\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    if (asFieldset === false) {\n      return false\n    }\n\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          child?.props?.label ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [asFieldset, children, label, nestedFieldBlockContext])\n}\n\nfunction CombineMessages({\n  type,\n  messages,\n}: {\n  type: StateTypes\n  messages: Array<StateWithMessage>\n}) {\n  const translations = useTranslation().Field\n\n  if (messages.length === 1) {\n    return <>{messages[0].message}</>\n  }\n\n  return (\n    <>\n      {type === 'error'\n        ? translations.errorSummary\n        : translations.stateSummary}\n      <Ul>\n        {messages.map(({ message }, i) => {\n          return <Li key={i}>{message}</Li>\n        })}\n      </Ul>\n    </>\n  )\n}\n\nfunction LabelDescription({ labelDescription, children }) {\n  if (!labelDescription) {\n    return children\n  }\n  return <div className=\"dnb-forms-field-block__label\">{children}</div>\n}\n\nfunction getMessage(item: Partial<StateWithMessage>): StateMessage {\n  const { content } = item\n\n  return ((content instanceof Error && content.message) ||\n    (content instanceof FormError && content.message) ||\n    content?.toString() ||\n    content) as StateMessage\n}\n\nFieldBlock._supportsSpacingProps = true\n\nexport default FieldBlock\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/FieldBlockDocs.js

@@ -44,6 +44,11 @@ export const fieldBlockProperties = _objectSpread(_objectSpread({}, fieldBlockSh
     type: 'boolean',
     status: 'optional'
   },
+  align: {
+    doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',
+    type: ['string', 'false'],
+    status: 'optional'
+  },
   composition: {
     doc: 'Use `true` for when you have more than one field wrapped.',
     type: 'string',

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

@@ -1 +1 @@
-{"version":3,"file":"FieldBlockDocs.js","names":["fieldBlockSharedProperties","label","doc","type","status","labelDescription","layout","width","contentWidth","fieldBlockProperties","_objectSpread","labelSize","asFieldset","composition","disabled"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const fieldBlockSharedProperties: PropertiesTableProps = {\n  label: {\n    doc: 'Field label to show above / before the input feature.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDescription: {\n    doc: 'A more discreet text displayed beside the label (i.e for \"(optional)\").',\n    type: 'string',\n    status: 'optional',\n  },\n  layout: {\n    doc: 'Layout for the label and input. Can be `horizontal` or `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`small`, `medium`, `large`, `stretch` or `false` for predefined standard widths.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  contentWidth: {\n    doc: '`small`, `medium`, `large`, `stretch` or `false` for predefined standard widths.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const fieldBlockProperties: PropertiesTableProps = {\n  ...fieldBlockSharedProperties,\n  labelSize: {\n    doc: 'Define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  asFieldset: {\n    doc: 'Use `true` when you have several form elements. This way a `fieldset` with a `legend` is used.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  composition: {\n    doc: 'Use `true` for when you have more than one field wrapped.',\n    type: 'string',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Set `true` to make the inner [FormLabel](/uilib/components/form-label/) behave as disabled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;AAEA,OAAO,MAAMA,0BAAgD,GAAG;EAC9DC,KAAK,EAAE;IACLC,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,yEAAyE;IAC9EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMK,oBAA0C,GAAAC,aAAA,CAAAA,aAAA,KAClDV,0BAA0B;EAC7BW,SAAS,EAAE;IACTT,GAAG,EAAE,4FAA4F;IACjGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,WAAW,EAAE;IACXX,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,EACF"}
+{"version":3,"file":"FieldBlockDocs.js","names":["fieldBlockSharedProperties","label","doc","type","status","labelDescription","layout","width","contentWidth","fieldBlockProperties","_objectSpread","labelSize","asFieldset","align","composition","disabled"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const fieldBlockSharedProperties: PropertiesTableProps = {\n  label: {\n    doc: 'Field label to show above / before the input feature.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDescription: {\n    doc: 'A more discreet text displayed beside the label (i.e for \"(optional)\").',\n    type: 'string',\n    status: 'optional',\n  },\n  layout: {\n    doc: 'Layout for the label and input. Can be `horizontal` or `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`small`, `medium`, `large`, `stretch` or `false` for predefined standard widths.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  contentWidth: {\n    doc: '`small`, `medium`, `large`, `stretch` or `false` for predefined standard widths.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const fieldBlockProperties: PropertiesTableProps = {\n  ...fieldBlockSharedProperties,\n  labelSize: {\n    doc: 'Define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  asFieldset: {\n    doc: 'Use `true` when you have several form elements. This way a `fieldset` with a `legend` is used.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align: {\n    doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  composition: {\n    doc: 'Use `true` for when you have more than one field wrapped.',\n    type: 'string',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Set `true` to make the inner [FormLabel](/uilib/components/form-label/) behave as disabled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;AAEA,OAAO,MAAMA,0BAAgD,GAAG;EAC9DC,KAAK,EAAE;IACLC,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,yEAAyE;IAC9EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMK,oBAA0C,GAAAC,aAAA,CAAAA,aAAA,KAClDV,0BAA0B;EAC7BW,SAAS,EAAE;IACTT,GAAG,EAAE,4FAA4F;IACjGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,KAAK,EAAE;IACLX,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDU,WAAW,EAAE;IACXZ,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,QAAQ,EAAE;IACRb,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AAAC,EACF"}

package/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -52,7 +52,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   grid-template-areas: "label contents" "status status";
 }
 .dnb-forms-field-block--width-stretch {
-  width: 100%;
   flex-grow: 1;
 }
 @media screen and (min-width: 25em) {
@@ -120,6 +119,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   .dnb-forms-field-block__contents__composition--horizontal {
     align-items: flex-end;
   }
+  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+    align-items: center;
+  }
 }
 @media screen and (max-width: 25em) {
   .dnb-forms-field-block__contents__composition--horizontal {

package/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1;width:100%}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}@media screen and (max-width:15em){.dnb-forms-field-number .dnb-input__shell,.dnb-forms-field-string .dnb-input__shell{width:90%}}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:25em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__contents__composition--vertical{display:flex;flex-flow:column;row-gap:var(--spacing-small)}.dnb-forms-field-block__contents__composition--horizontal{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25em){.dnb-forms-field-block__contents__composition--horizontal{align-items:flex-end}.dnb-forms-field-block__contents__composition--horizontal[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__contents__composition--horizontal{flex-flow:column;row-gap:var(--spacing-x-small)}}

package/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -50,7 +50,6 @@ fieldset.dnb-forms-field-block {
 
   &--width {
     &-stretch {
-      width: 100%;
       flex-grow: 1;
     }
     @include allAbove(x-small) {
@@ -124,7 +123,11 @@ fieldset.dnb-forms-field-block {
         column-gap: var(--spacing-small);
 
         @include allAbove(x-small) {
-          align-items: flex-end;
+          align-items: flex-end; // To support fields with labels of different size
+
+          &[class*='align-center'] {
+            align-items: center; // To support fields without labels, but different heights
+          }
         }
         @include allBelow(x-small) {
           row-gap: var(--spacing-x-small);

package/extensions/forms/Form/FieldProps/FieldProps.d.ts

@@ -1,15 +1,29 @@
 import React from 'react';
 import { Props as DataContextProps } from '../../DataContext/Provider';
-import { UseFieldProps } from '../../types';
 import { FormStatusProps } from '../../../../components/FormStatus';
 import { ContextProps } from '../../../../shared/Context';
-export type FieldPropsProps = UseFieldProps & {
+import type { FieldProps, Path } from '../../types';
+export type FieldPropsProps = FieldProps & {
     children: React.ReactNode;
+    /**
+     * Locale to use for all nested Eufemia components
+     */
+    locale?: DataContextProps<unknown>['locale'];
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translations?: DataContextProps<unknown>['translations'];
+    /** For internal use only */
+    overwriteProps?: {
+        [key: Path]: FieldProps;
+    };
+    /** For internal use only */
+    deep?: boolean;
+    /** For internal use only */
     formElement?: ContextProps['formElement'];
+    /** For internal use only */
     FormStatus?: {
         globalStatus: FormStatusProps;
     };
-    locale?: DataContextProps<unknown>['locale'];
-    translations?: DataContextProps<unknown>['translations'];
 };
-export default function FieldProps(props: FieldPropsProps): import("react/jsx-runtime").JSX.Element;
+export default function FieldPropsProvider(props: FieldPropsProps): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/FieldProps/FieldProps.js

@@ -1,33 +1,37 @@
 "use client";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "formElement", "FormStatus"],
-  _excluded2 = ["locale", "translations"];
-import React, { useContext, useRef } from 'react';
+const _excluded = ["children", "formElement", "FormStatus", "overwriteProps", "deep"];
+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; }
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import DataContext from '../../DataContext/Context';
-import { assignPropsWithContext } from '../../../../shared/component-helper';
+import { assignPropsWithContext, extendDeep } from '../../../../shared/component-helper';
 import FieldPropsContext from './FieldPropsContext';
 import SharedProvider from '../../../../shared/Provider';
-export default function FieldProps(props) {
+export default function FieldPropsProvider(props) {
+  var _dataContextRef$curre, _dataContextRef$curre2, _dataContextRef$curre3, _dataContextRef$curre4, _dataContextRef$curre5;
   const {
       children,
       formElement,
-      FormStatus
+      FormStatus,
+      overwriteProps,
+      deep
     } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    restProps = _objectWithoutProperties(props, _excluded);
   const nestedContext = useContext(FieldPropsContext);
   const dataContextRef = useRef();
   dataContextRef.current = useContext(DataContext);
   const sharedProviderProps = {};
-  const _ref = Object.assign((nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedContext) || {}, rest),
-    {
-      locale,
-      translations
-    } = _ref,
-    restOfRest = _objectWithoutProperties(_ref, _excluded2);
-  if (typeof restOfRest.disabled === 'boolean') {
+  const locale = (_dataContextRef$curre = (_dataContextRef$curre2 = dataContextRef.current) === null || _dataContextRef$curre2 === void 0 ? void 0 : (_dataContextRef$curre3 = _dataContextRef$curre2.props) === null || _dataContextRef$curre3 === void 0 ? void 0 : _dataContextRef$curre3.locale) !== null && _dataContextRef$curre !== void 0 ? _dataContextRef$curre : restProps === null || restProps === void 0 ? void 0 : restProps.locale;
+  const translations = extendDeep({}, restProps === null || restProps === void 0 ? void 0 : restProps.translations, (_dataContextRef$curre4 = dataContextRef.current) === null || _dataContextRef$curre4 === void 0 ? void 0 : (_dataContextRef$curre5 = _dataContextRef$curre4.props) === null || _dataContextRef$curre5 === void 0 ? void 0 : _dataContextRef$curre5.translations);
+  const nestedFieldProps = useMemo(() => {
+    return Object.assign((nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps) || {}, restProps);
+  }, [nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps, restProps]);
+  if (typeof nestedFieldProps.disabled === 'boolean') {
     sharedProviderProps.formElement = {
-      disabled: restOfRest.disabled
+      disabled: nestedFieldProps.disabled
     };
   }
   if (formElement) {
@@ -39,25 +43,42 @@ export default function FieldProps(props) {
   if (locale) {
     sharedProviderProps.locale = locale;
   }
-  if (translations) {
-    sharedProviderProps.translations = wrapFormsTranslations(translations);
+  const formTranslations = useMemo(() => {
+    if (translations) {
+      return transformTranslations(translations);
+    }
+  }, [translations]);
+  if (formTranslations) {
+    sharedProviderProps.translations = formTranslations;
   }
-  function extend(fieldProps) {
+  const extend = useCallback(fieldProps => {
+    var _fieldProps$path, _fieldProps$path$spli, _nestedContext$inheri;
     const {
-      required
+      required: requiredByContext
     } = dataContextRef.current;
-    return nestedContext.extend(assignPropsWithContext(fieldProps, {
-      required
-    }, restOfRest));
-  }
+    const key = fieldProps === null || fieldProps === void 0 ? void 0 : (_fieldProps$path = fieldProps.path) === null || _fieldProps$path === void 0 ? void 0 : (_fieldProps$path$spli = _fieldProps$path.split('/')) === null || _fieldProps$path$spli === void 0 ? void 0 : _fieldProps$path$spli.pop();
+    const overwrite = overwriteProps === null || overwriteProps === void 0 ? void 0 : overwriteProps[key];
+    if (overwrite && fieldProps !== null && fieldProps !== void 0 && fieldProps.schema) {
+      Object.keys(fieldProps.schema).forEach(key => {
+        if (overwrite !== null && overwrite !== void 0 && overwrite[key]) {
+          fieldProps.schema[key] = overwrite[key];
+        }
+      });
+    }
+    const value = assignPropsWithContext(overwrite ? _objectSpread(_objectSpread({}, fieldProps), overwrite) : fieldProps, {
+      required: requiredByContext !== null && requiredByContext !== void 0 ? requiredByContext : nestedContext === null || nestedContext === void 0 ? void 0 : (_nestedContext$inheri = nestedContext.inheritedContext) === null || _nestedContext$inheri === void 0 ? void 0 : _nestedContext$inheri.required
+    }, nestedFieldProps);
+    return deep ? nestedContext.extend(value) : value;
+  }, [deep, nestedContext, overwriteProps, nestedFieldProps]);
   return React.createElement(FieldPropsContext.Provider, {
     value: {
       extend,
-      inheritedContext: rest
+      inheritedProps: restProps,
+      inheritedContext: nestedFieldProps
     }
   }, React.createElement(SharedProvider, sharedProviderProps, children));
 }
-function wrapFormsTranslations(translations) {
+function transformTranslations(translations) {
   const result = {};
   const trObj = translations;
   for (const locale in trObj) {

package/extensions/forms/Form/FieldProps/FieldProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldProps.js","names":["React","useContext","useRef","DataContext","assignPropsWithContext","FieldPropsContext","SharedProvider","FieldProps","props","children","formElement","FormStatus","rest","_objectWithoutProperties","_excluded","nestedContext","dataContextRef","current","sharedProviderProps","_ref","Object","assign","inheritedContext","locale","translations","restOfRest","_excluded2","disabled","wrapFormsTranslations","extend","fieldProps","required","createElement","Provider","value","result","trObj","newObj","Forms","key","newKeyObj","subKey"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { UseFieldProps } from '../../types'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport { assignPropsWithContext } from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\n\nexport type FieldPropsProps = UseFieldProps & {\n  children: React.ReactNode\n  formElement?: ContextProps['formElement']\n  FormStatus?: { globalStatus: FormStatusProps }\n  locale?: DataContextProps<unknown>['locale']\n  translations?: DataContextProps<unknown>['translations']\n}\n\nexport default function FieldProps(props: FieldPropsProps) {\n  const { children, formElement, FormStatus, ...rest } = props\n\n  const nestedContext = useContext(FieldPropsContext)\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const sharedProviderProps: ContextProps = {}\n\n  // Extract props to be used in the shared global context\n  const { locale, translations, ...restOfRest } = Object.assign(\n    nestedContext?.inheritedContext || {},\n    rest\n  ) as ContextProps & {\n    disabled?: boolean\n  }\n  if (typeof restOfRest.disabled === 'boolean') {\n    sharedProviderProps.formElement = { disabled: restOfRest.disabled }\n  }\n  if (formElement) {\n    sharedProviderProps.formElement = formElement\n  }\n  if (FormStatus) {\n    sharedProviderProps.FormStatus = FormStatus\n  }\n  if (locale) {\n    sharedProviderProps.locale = locale\n  }\n  if (translations) {\n    sharedProviderProps.translations = wrapFormsTranslations(translations)\n  }\n\n  function extend<T>(fieldProps: T) {\n    // Extract props from data context to be used in fields\n    const { required } = dataContextRef.current\n\n    return nestedContext.extend(\n      assignPropsWithContext(fieldProps, { required }, restOfRest)\n    ) as T\n  }\n\n  return (\n    <FieldPropsContext.Provider value={{ extend, inheritedContext: rest }}>\n      <SharedProvider {...sharedProviderProps}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\nfunction wrapFormsTranslations(\n  translations: ContextProps['translations']\n) {\n  const result = {}\n  const trObj = translations as Record<\n    ContextProps['locale'],\n    Record<string, Record<string, string>>\n  >\n\n  for (const locale in trObj) {\n    const newObj: Record<\n      'Forms',\n      Record<string, Record<string, string>>\n    > = {\n      Forms: {},\n    }\n\n    for (const key in trObj[locale]) {\n      const newKeyObj: Record<string, string> = {}\n\n      for (const subKey in trObj[locale][key]) {\n        newKeyObj[subKey] = trObj[locale][key][subKey]\n      }\n\n      newObj.Forms[key] = newKeyObj\n    }\n\n    result[locale] = newObj\n  }\n\n  return result\n}\n"],"mappings":"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"}
+{"version":3,"file":"FieldProps.js","names":["React","useCallback","useContext","useMemo","useRef","DataContext","assignPropsWithContext","extendDeep","FieldPropsContext","SharedProvider","FieldPropsProvider","props","_dataContextRef$curre","_dataContextRef$curre2","_dataContextRef$curre3","_dataContextRef$curre4","_dataContextRef$curre5","children","formElement","FormStatus","overwriteProps","deep","restProps","_objectWithoutProperties","_excluded","nestedContext","dataContextRef","current","sharedProviderProps","locale","translations","nestedFieldProps","Object","assign","inheritedProps","disabled","formTranslations","transformTranslations","extend","fieldProps","_fieldProps$path","_fieldProps$path$spli","_nestedContext$inheri","required","requiredByContext","key","path","split","pop","overwrite","schema","keys","forEach","value","_objectSpread","inheritedContext","createElement","Provider","result","trObj","newObj","Forms","newKeyObj","subKey"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport {\n  assignPropsWithContext,\n  extendDeep,\n} from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\nimport type { FieldProps, Path, UseFieldProps } from '../../types'\n\nexport type FieldPropsProps = FieldProps & {\n  children: React.ReactNode\n\n  /**\n   * Locale to use for all nested Eufemia components\n   */\n  locale?: DataContextProps<unknown>['locale']\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<unknown>['translations']\n\n  /** For internal use only */\n  overwriteProps?: {\n    [key: Path]: FieldProps\n  }\n\n  /** For internal use only */\n  deep?: boolean\n\n  /** For internal use only */\n  formElement?: ContextProps['formElement']\n\n  /** For internal use only */\n  FormStatus?: { globalStatus: FormStatusProps }\n}\n\nexport default function FieldPropsProvider(props: FieldPropsProps) {\n  const {\n    children,\n    formElement,\n    FormStatus,\n    overwriteProps,\n    deep,\n    ...restProps\n  } = props\n\n  const nestedContext = useContext(FieldPropsContext)\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const sharedProviderProps: ContextProps = {}\n\n  /**\n   * Always use data context as the last source for localization\n   */\n  const locale = dataContextRef.current?.props?.locale ?? restProps?.locale\n  const translations = extendDeep(\n    {},\n    restProps?.translations,\n    dataContextRef.current?.props?.translations\n  ) as ContextProps\n\n  const nestedFieldProps = useMemo(() => {\n    return Object.assign(\n      nestedContext?.inheritedProps || {},\n      restProps\n    ) as UseFieldProps\n  }, [nestedContext?.inheritedProps, restProps])\n\n  if (typeof nestedFieldProps.disabled === 'boolean') {\n    sharedProviderProps.formElement = {\n      disabled: nestedFieldProps.disabled,\n    }\n  }\n  if (formElement) {\n    sharedProviderProps.formElement = formElement\n  }\n  if (FormStatus) {\n    sharedProviderProps.FormStatus = FormStatus\n  }\n  if (locale) {\n    sharedProviderProps.locale = locale\n  }\n  const formTranslations = useMemo(() => {\n    if (translations) {\n      return transformTranslations(translations)\n    }\n  }, [translations])\n  if (formTranslations) {\n    sharedProviderProps.translations = formTranslations\n  }\n\n  const extend = useCallback(\n    <T extends FieldProps>(fieldProps: T) => {\n      // Extract props from data context to be used in fields\n      const { required: requiredByContext } = dataContextRef.current\n\n      // Extract props from overwriteProps to be used in fields\n      const key = fieldProps?.path?.split('/')?.pop()\n      const overwrite = overwriteProps?.[key]\n\n      // Overwrite given schema props\n      if (overwrite && fieldProps?.schema) {\n        Object.keys(fieldProps.schema).forEach((key) => {\n          if (overwrite?.[key]) {\n            fieldProps.schema[key] = overwrite[key]\n          }\n        })\n      }\n\n      const value = assignPropsWithContext(\n        overwrite ? { ...fieldProps, ...overwrite } : fieldProps,\n        {\n          required:\n            requiredByContext ?? nestedContext?.inheritedContext?.required,\n        },\n        nestedFieldProps as Record<string, unknown>\n      )\n\n      return (deep ? nestedContext.extend(value) : value) as T\n    },\n    [deep, nestedContext, overwriteProps, nestedFieldProps]\n  )\n\n  return (\n    <FieldPropsContext.Provider\n      value={{\n        extend,\n        inheritedProps: restProps,\n        inheritedContext: nestedFieldProps,\n      }}\n    >\n      <SharedProvider {...sharedProviderProps}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\n/**\n * Transform translations into { 'nb-NO': { Forms: { ... } } }\n */\nfunction transformTranslations(\n  translations: ContextProps['translations']\n) {\n  const result = {}\n  const trObj = translations as Record<\n    ContextProps['locale'],\n    Record<string, Record<string, string>>\n  >\n\n  for (const locale in trObj) {\n    const newObj: Record<\n      'Forms',\n      Record<string, Record<string, string>>\n    > = {\n      Forms: {},\n    }\n\n    for (const key in trObj[locale]) {\n      const newKeyObj: Record<string, string> = {}\n\n      for (const subKey in trObj[locale][key]) {\n        newKeyObj[subKey] = trObj[locale][key][subKey]\n      }\n\n      newObj.Forms[key] = newKeyObj\n    }\n\n    result[locale] = newObj\n  }\n\n  return result\n}\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,WAAW,MAAwB,2BAA2B;AAGrE,SACEC,sBAAsB,EACtBC,UAAU,QACL,qCAAqC;AAC5C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,cAAc,MAAM,6BAA6B;AAgCxD,eAAe,SAASC,kBAAkBA,CAACC,KAAsB,EAAE;EAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA;EACjE,MAAM;MACJC,QAAQ;MACRC,WAAW;MACXC,UAAU;MACVC,cAAc;MACdC;IAEF,CAAC,GAAGV,KAAK;IADJW,SAAS,GAAAC,wBAAA,CACVZ,KAAK,EAAAa,SAAA;EAET,MAAMC,aAAa,GAAGvB,UAAU,CAACM,iBAAiB,CAAC;EACnD,MAAMkB,cAAc,GAAGtB,MAAM,CAAe,CAAC;EAC7CsB,cAAc,CAACC,OAAO,GAAGzB,UAAU,CAAeG,WAAW,CAAC;EAE9D,MAAMuB,mBAAiC,GAAG,CAAC,CAAC;EAK5C,MAAMC,MAAM,IAAAjB,qBAAA,IAAAC,sBAAA,GAAGa,cAAc,CAACC,OAAO,cAAAd,sBAAA,wBAAAC,sBAAA,GAAtBD,sBAAA,CAAwBF,KAAK,cAAAG,sBAAA,uBAA7BA,sBAAA,CAA+Be,MAAM,cAAAjB,qBAAA,cAAAA,qBAAA,GAAIU,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEO,MAAM;EACzE,MAAMC,YAAY,GAAGvB,UAAU,CAC7B,CAAC,CAAC,EACFe,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEQ,YAAY,GAAAf,sBAAA,GACvBW,cAAc,CAACC,OAAO,cAAAZ,sBAAA,wBAAAC,sBAAA,GAAtBD,sBAAA,CAAwBJ,KAAK,cAAAK,sBAAA,uBAA7BA,sBAAA,CAA+Bc,YACjC,CAAiB;EAEjB,MAAMC,gBAAgB,GAAG5B,OAAO,CAAC,MAAM;IACrC,OAAO6B,MAAM,CAACC,MAAM,CAClB,CAAAR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,cAAc,KAAI,CAAC,CAAC,EACnCZ,SACF,CAAC;EACH,CAAC,EAAE,CAACG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,cAAc,EAAEZ,SAAS,CAAC,CAAC;EAE9C,IAAI,OAAOS,gBAAgB,CAACI,QAAQ,KAAK,SAAS,EAAE;IAClDP,mBAAmB,CAACV,WAAW,GAAG;MAChCiB,QAAQ,EAAEJ,gBAAgB,CAACI;IAC7B,CAAC;EACH;EACA,IAAIjB,WAAW,EAAE;IACfU,mBAAmB,CAACV,WAAW,GAAGA,WAAW;EAC/C;EACA,IAAIC,UAAU,EAAE;IACdS,mBAAmB,CAACT,UAAU,GAAGA,UAAU;EAC7C;EACA,IAAIU,MAAM,EAAE;IACVD,mBAAmB,CAACC,MAAM,GAAGA,MAAM;EACrC;EACA,MAAMO,gBAAgB,GAAGjC,OAAO,CAAC,MAAM;IACrC,IAAI2B,YAAY,EAAE;MAChB,OAAOO,qBAAqB,CAACP,YAAY,CAAC;IAC5C;EACF,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAClB,IAAIM,gBAAgB,EAAE;IACpBR,mBAAmB,CAACE,YAAY,GAAGM,gBAAgB;EACrD;EAEA,MAAME,MAAM,GAAGrC,WAAW,CACDsC,UAAa,IAAK;IAAA,IAAAC,gBAAA,EAAAC,qBAAA,EAAAC,qBAAA;IAEvC,MAAM;MAAEC,QAAQ,EAAEC;IAAkB,CAAC,GAAGlB,cAAc,CAACC,OAAO;IAG9D,MAAMkB,GAAG,GAAGN,UAAU,aAAVA,UAAU,wBAAAC,gBAAA,GAAVD,UAAU,CAAEO,IAAI,cAAAN,gBAAA,wBAAAC,qBAAA,GAAhBD,gBAAA,CAAkBO,KAAK,CAAC,GAAG,CAAC,cAAAN,qBAAA,uBAA5BA,qBAAA,CAA8BO,GAAG,CAAC,CAAC;IAC/C,MAAMC,SAAS,GAAG7B,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGyB,GAAG,CAAC;IAGvC,IAAII,SAAS,IAAIV,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEW,MAAM,EAAE;MACnClB,MAAM,CAACmB,IAAI,CAACZ,UAAU,CAACW,MAAM,CAAC,CAACE,OAAO,CAAEP,GAAG,IAAK;QAC9C,IAAII,SAAS,aAATA,SAAS,eAATA,SAAS,CAAGJ,GAAG,CAAC,EAAE;UACpBN,UAAU,CAACW,MAAM,CAACL,GAAG,CAAC,GAAGI,SAAS,CAACJ,GAAG,CAAC;QACzC;MACF,CAAC,CAAC;IACJ;IAEA,MAAMQ,KAAK,GAAG/C,sBAAsB,CAClC2C,SAAS,GAAAK,aAAA,CAAAA,aAAA,KAAQf,UAAU,GAAKU,SAAS,IAAKV,UAAU,EACxD;MACEI,QAAQ,EACNC,iBAAiB,aAAjBA,iBAAiB,cAAjBA,iBAAiB,GAAInB,aAAa,aAAbA,aAAa,wBAAAiB,qBAAA,GAAbjB,aAAa,CAAE8B,gBAAgB,cAAAb,qBAAA,uBAA/BA,qBAAA,CAAiCC;IAC1D,CAAC,EACDZ,gBACF,CAAC;IAED,OAAQV,IAAI,GAAGI,aAAa,CAACa,MAAM,CAACe,KAAK,CAAC,GAAGA,KAAK;EACpD,CAAC,EACD,CAAChC,IAAI,EAAEI,aAAa,EAAEL,cAAc,EAAEW,gBAAgB,CACxD,CAAC;EAED,OACE/B,KAAA,CAAAwD,aAAA,CAAChD,iBAAiB,CAACiD,QAAQ;IACzBJ,KAAK,EAAE;MACLf,MAAM;MACNJ,cAAc,EAAEZ,SAAS;MACzBiC,gBAAgB,EAAExB;IACpB;EAAE,GAEF/B,KAAA,CAAAwD,aAAA,CAAC/C,cAAc,EAAKmB,mBAAmB,EAAGX,QAAyB,CACzC,CAAC;AAEjC;AAKA,SAASoB,qBAAqBA,CAC5BP,YAA0C,EAC1C;EACA,MAAM4B,MAAM,GAAG,CAAC,CAAC;EACjB,MAAMC,KAAK,GAAG7B,YAGb;EAED,KAAK,MAAMD,MAAM,IAAI8B,KAAK,EAAE;IAC1B,MAAMC,MAGL,GAAG;MACFC,KAAK,EAAE,CAAC;IACV,CAAC;IAED,KAAK,MAAMhB,GAAG,IAAIc,KAAK,CAAC9B,MAAM,CAAC,EAAE;MAC/B,MAAMiC,SAAiC,GAAG,CAAC,CAAC;MAE5C,KAAK,MAAMC,MAAM,IAAIJ,KAAK,CAAC9B,MAAM,CAAC,CAACgB,GAAG,CAAC,EAAE;QACvCiB,SAAS,CAACC,MAAM,CAAC,GAAGJ,KAAK,CAAC9B,MAAM,CAAC,CAACgB,GAAG,CAAC,CAACkB,MAAM,CAAC;MAChD;MAEAH,MAAM,CAACC,KAAK,CAAChB,GAAG,CAAC,GAAGiB,SAAS;IAC/B;IAEAJ,MAAM,CAAC7B,MAAM,CAAC,GAAG+B,MAAM;EACzB;EAEA,OAAOF,MAAM;AACf"}

package/extensions/forms/Form/FieldProps/FieldPropsContext.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { UseFieldProps } from '../../types';
 export type FieldPropsContextProps = {
     extend: <T = UseFieldProps>(props: T) => T;
+    inheritedProps?: UseFieldProps;
     inheritedContext?: UseFieldProps;
 };
 declare const FieldPropsContext: React.Context<FieldPropsContextProps>;

package/extensions/forms/Form/FieldProps/FieldPropsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldPropsContext.js","names":["React","extend","props","FieldPropsContext","createContext"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldPropsContext.ts"],"sourcesContent":["import React from 'react'\nimport { UseFieldProps } from '../../types'\n\nexport type FieldPropsContextProps = {\n  extend: <T = UseFieldProps>(props: T) => T\n  inheritedContext?: UseFieldProps\n}\n\nconst extend: FieldPropsContextProps['extend'] = (props) => props\nconst FieldPropsContext = React.createContext<FieldPropsContextProps>({\n  extend,\n})\n\nexport default FieldPropsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,MAAwC,GAAIC,KAAK,IAAKA,KAAK;AACjE,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,aAAa,CAAyB;EACpEH;AACF,CAAC,CAAC;AAEF,eAAeE,iBAAiB"}
+{"version":3,"file":"FieldPropsContext.js","names":["React","extend","props","FieldPropsContext","createContext"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldPropsContext.ts"],"sourcesContent":["import React from 'react'\nimport { UseFieldProps } from '../../types'\n\nexport type FieldPropsContextProps = {\n  extend: <T = UseFieldProps>(props: T) => T\n  inheritedProps?: UseFieldProps\n  inheritedContext?: UseFieldProps\n}\n\nconst extend: FieldPropsContextProps['extend'] = (props) => props\nconst FieldPropsContext = React.createContext<FieldPropsContextProps>({\n  extend,\n})\n\nexport default FieldPropsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,MAAwC,GAAIC,KAAK,IAAKA,KAAK;AACjE,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,aAAa,CAAyB;EACpEH;AACF,CAAC,CAAC;AAEF,eAAeE,iBAAiB"}

package/extensions/forms/Form/MainHeading/MainHeading.js

@@ -18,6 +18,7 @@ function MainHeading(_ref) {
   return React.createElement(Heading, _extends({
     className: classnames('dnb-forms-main-heading', className),
     level: level || 2,
+    skip_correction: true,
     size: "large"
   }, rest), children);
 }

package/extensions/forms/Form/MainHeading/MainHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainHeading.js","names":["React","classnames","Heading","MainHeading","_ref","level","props","_objectWithoutProperties","_excluded","className","children","rest","_excluded2","createElement","_extends","size","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/MainHeading/MainHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Heading from '../../../../components/heading/Heading'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction MainHeading({ level, ...props }: Props) {\n  const { className, children, ...rest } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-main-heading', className)}\n      level={level || 2}\n      size=\"large\"\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nMainHeading._supportsSpacingProps = true\nMainHeading._isHeadingElement = true\n\nexport default MainHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,wCAAwC;AAS5D,SAASC,WAAWA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACpC,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAJ,wBAAA,CAAKD,KAAK,EAAAM,UAAA;EAC9C,OACEZ,KAAA,CAAAa,aAAA,CAACX,OAAO,EAAAY,QAAA;IACNL,SAAS,EAAER,UAAU,CAAC,wBAAwB,EAAEQ,SAAS,CAAE;IAC3DJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBU,IAAI,EAAC;EAAO,GACRJ,IAAI,GAEPD,QACM,CAAC;AAEd;AAEAP,WAAW,CAACa,qBAAqB,GAAG,IAAI;AACxCb,WAAW,CAACc,iBAAiB,GAAG,IAAI;AAEpC,eAAed,WAAW"}
+{"version":3,"file":"MainHeading.js","names":["React","classnames","Heading","MainHeading","_ref","level","props","_objectWithoutProperties","_excluded","className","children","rest","_excluded2","createElement","_extends","skip_correction","size","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/MainHeading/MainHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Heading from '../../../../components/heading/Heading'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction MainHeading({ level, ...props }: Props) {\n  const { className, children, ...rest } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-main-heading', className)}\n      level={level || 2}\n      skip_correction\n      size=\"large\"\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nMainHeading._supportsSpacingProps = true\nMainHeading._isHeadingElement = true\n\nexport default MainHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,wCAAwC;AAS5D,SAASC,WAAWA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACpC,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAJ,wBAAA,CAAKD,KAAK,EAAAM,UAAA;EAC9C,OACEZ,KAAA,CAAAa,aAAA,CAACX,OAAO,EAAAY,QAAA;IACNL,SAAS,EAAER,UAAU,CAAC,wBAAwB,EAAEQ,SAAS,CAAE;IAC3DJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBU,eAAe;IACfC,IAAI,EAAC;EAAO,GACRL,IAAI,GAEPD,QACM,CAAC;AAEd;AAEAP,WAAW,CAACc,qBAAqB,GAAG,IAAI;AACxCd,WAAW,CAACe,iBAAiB,GAAG,IAAI;AAEpC,eAAef,WAAW"}

package/extensions/forms/Form/Section/Section.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { SectionContextState } from './SectionContext';
+import type { Props as DataContextProps } from '../../DataContext/Provider';
+import type { FieldSectionProps, Path, FieldProps } from '../../types';
+export type OverwritePropsDefaults = {
+    [key: Path]: (FieldProps & FieldSectionProps) | OverwritePropsDefaults;
+};
+export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
+    /**
+     * Path to the section.
+     * When defined, fields inside the section will get this path as a prefix of their own path.
+     */
+    path?: Path;
+    /**
+     * Overwrite field props for the section.
+     */
+    overwriteProps?: overwriteProps | OverwritePropsDefaults;
+    /**
+     * Makes all fields inside it required.
+     */
+    required?: boolean;
+    /**
+     * Only for internal use and undocumented for now.
+     * Prioritize error techniques for the section.
+     * Can be `fieldSchema`, `sectionSchema` or `contextSchema.
+     */
+    errorPrioritization?: SectionContextState['errorPrioritization'];
+} & Pick<DataContextProps<unknown>, 'data' | 'defaultData' | 'onChange' | 'translations'>;
+export type LocalProps = SectionProps & {
+    children: React.ReactNode;
+};
+declare function SectionComponent(props: LocalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SectionComponent {
+    var _supportsSpacingProps: string;
+}
+export default SectionComponent;