@dnb/eufemia 10.63.4 → 10.64.1

package/extensions/forms/Field/Provider/useFieldProvider.d.ts

@@ -74,9 +74,9 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         'aria-valuemin'?: number;
         'aria-valuenow'?: number;
         'aria-valuetext'?: string;
-        onFocus?: (value: unknown) => void;
-        onBlur?: (value: unknown) => void;
-        onChange?: (value: unknown) => void | import("../../types").EventReturnWithStateObjectAndSuccess | Promise<void | import("../../types").EventReturnWithStateObjectAndSuccess>;
+        onFocus?: (value: unknown, additionalArgs?: import("../../types").ReceiveAdditionalEventArgs<unknown, import("../../types").DefaultErrorMessages>) => void;
+        onBlur?: (value: unknown, additionalArgs?: import("../../types").ReceiveAdditionalEventArgs<unknown, import("../../types").DefaultErrorMessages>) => void;
+        onChange?: (value: unknown, additionalArgs?: import("../../types").ReceiveAdditionalEventArgs<unknown, import("../../types").DefaultErrorMessages>) => void | import("../../types").EventReturnWithStateObjectAndSuccess | Promise<void | import("../../types").EventReturnWithStateObjectAndSuccess>;
         help?: import("../../../../components/help-button/HelpButtonInline").HelpProps;
         locale?: string;
         autoComplete?: AutoFill;
@@ -110,7 +110,7 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         transformIn?: (external: unknown) => unknown;
         transformOut?: (internal: unknown, additionalArgs?: unknown) => unknown;
         transformValue?: (value: unknown, currentValue?: unknown) => unknown;
-        provideAdditionalArgs?: (value: unknown, additionalArgs?: import("../../types").AdditionalEventArgs) => import("../../types").AdditionalEventArgs;
+        provideAdditionalArgs?: (value: unknown, additionalArgs?: import("../../types").ProvideAdditionalEventArgs) => import("../../types").ProvideAdditionalEventArgs;
         toInput?: (external: unknown) => unknown;
         toEvent?: (internal: unknown, type: "onFocus" | "onBlur" | "onChange" | "onBlurValidator") => unknown;
         fromInput?: (external: unknown) => unknown;

package/extensions/forms/Field/Selection/Selection.js

@@ -115,7 +115,7 @@ function Selection(props) {
           layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
           disabled: disabled,
           on_change: onChangeHandler,
-          value: String(value !== null && value !== void 0 ? value : '')
+          value: String(value !== null && value !== void 0 ? value : '') || undefined
         }, items));
       }
     case 'autocomplete':
@@ -166,7 +166,6 @@ function renderRadioItems(_ref6) {
   } = _ref6;
   const optionsCount = React.Children.count(children) + ((dataList === null || dataList === void 0 ? void 0 : dataList.length) || 0);
   const createOption = (props, i) => {
-    var _ref7;
     const {
         value,
         title,
@@ -190,7 +189,7 @@ function renderRadioItems(_ref6) {
       key: `option-${i}-${id}`,
       label: variant === 'radio' ? label : undefined,
       text: variant === 'button' ? label : undefined,
-      value: String((_ref7 = value !== null && value !== void 0 ? value : valueProp) !== null && _ref7 !== void 0 ? _ref7 : ''),
+      value: String(value !== null && value !== void 0 ? value : valueProp) || undefined,
       status: (hasError || checkForError([error, info, warning])) && 'error',
       suffix: suffix
     }, htmlAttributes, rest));
@@ -201,10 +200,10 @@ function renderRadioItems(_ref6) {
     createOption
   }) || [])].filter(Boolean);
 }
-export function mapOptions(children, _ref8) {
+export function mapOptions(children, _ref7) {
   let {
     createOption
-  } = _ref8;
+  } = _ref7;
   return React.Children.map(children, (child, i) => {
     if (React.isValidElement(child)) {
       if (child.type === OptionField) {
@@ -227,9 +226,9 @@ export function makeOptions(children, transformSelection) {
       child = child['props'].children;
     }
     if (React.isValidElement(child) && child.type === OptionField) {
-      var _ref9, _props$title, _props$value;
+      var _ref8, _props$title, _props$value;
       const props = child.props;
-      const title = (_ref9 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref9 !== void 0 ? _ref9 : _em || (_em = React.createElement("em", null, "Untitled"));
+      const title = (_ref8 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref8 !== void 0 ? _ref8 : _em || (_em = React.createElement("em", null, "Untitled"));
       const content = props.text ? [title, props.text] : title;
       const selected_value = transformSelection ? transformSelection(props) : undefined;
       const selectedKey = String((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : '');

package/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","_ref7","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","_ref8","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref9","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n  style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    transformSelection,\n    data,\n    dataPath,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(label)\n          }\n        },\n      })\n\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          labelHeight=\"small\"\n          asFieldset={React.Children.count(items) > 1}\n        >\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(displayValue)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp ?? '')}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode,\n  transformSelection?: Props['transformSelection']\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","_ref7","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref8","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n  style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    transformSelection,\n    data,\n    dataPath,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(label)\n          }\n        },\n      })\n\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          labelHeight=\"small\"\n          asFieldset={React.Children.count(items) > 1}\n        >\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '') || undefined}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(displayValue)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp) || undefined}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode,\n  transformSelection?: Props['transformSelection']\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ export { default as String } from './String';
 export { default as Number } from './Number';
 export { default as Toggle } from './Toggle';
 export { default as Indeterminate } from './Indeterminate';
+export { default as Address } from './Address';
 export { default as Boolean } from './Boolean';
 export { default as Currency } from './Currency';
 export { default as Date } from './Date';

package/extensions/forms/Field/index.js

@@ -4,6 +4,7 @@ export { default as String } from './String';
 export { default as Number } from './Number';
 export { default as Toggle } from './Toggle';
 export { default as Indeterminate } from './Indeterminate';
+export { default as Address } from './Address';
 export { default as Boolean } from './Boolean';
 export { default as Currency } from './Currency';
 export { default as Date } from './Date';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Provider","Composition","String","Number","Toggle","Indeterminate","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password","Slider","Upload"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as Provider } from './Provider'\nexport { default as Composition } from './Composition'\nexport { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Indeterminate } from './Indeterminate'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\nexport { default as Slider } from './Slider'\nexport { default as Upload } from './Upload'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAAQ,QAAQ,YAAY;AAChD,SAASD,OAAO,IAAIE,WAAW,QAAQ,eAAe;AACtD,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,MAAM,QAAQ,UAAU;AAC5C,SAASJ,OAAO,IAAIK,MAAM,QAAQ,UAAU;AAC5C,SAASL,OAAO,IAAIM,aAAa,QAAQ,iBAAiB;AAC1D,SAASN,OAAO,IAAIO,OAAO,QAAQ,WAAW;AAC9C,SAASP,OAAO,IAAIQ,QAAQ,QAAQ,YAAY;AAChD,SAASR,OAAO,IAAIS,IAAI,QAAQ,QAAQ;AACxC,SAAST,OAAO,IAAIU,KAAK,QAAQ,SAAS;AAC1C,SAASV,OAAO,IAAIW,IAAI,QAAQ,QAAQ;AACxC,SAASX,OAAO,IAAIY,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASZ,OAAO,IAAIa,WAAW,QAAQ,eAAe;AACtD,SAASb,OAAO,IAAIc,kBAAkB,QAAQ,sBAAsB;AACpE,SAASd,OAAO,IAAIe,iBAAiB,QAAQ,qBAAqB;AAClE,SAASf,OAAO,IAAIgB,SAAS,QAAQ,aAAa;AAClD,SAAShB,OAAO,IAAIiB,cAAc,QAAQ,kBAAkB;AAC5D,SAASjB,OAAO,IAAIkB,MAAM,QAAQ,UAAU;AAC5C,SAASlB,OAAO,IAAImB,aAAa,QAAQ,iBAAiB;AAC1D,SAASnB,OAAO,IAAIoB,iBAAiB,QAAQ,qBAAqB;AAClE,SAASpB,OAAO,IAAIqB,MAAM,QAAQ,UAAU;AAC5C,SAASrB,OAAO,IAAIsB,QAAQ,QAAQ,YAAY;AAChD,SAAStB,OAAO,IAAIuB,MAAM,QAAQ,UAAU;AAC5C,SAASvB,OAAO,IAAIwB,MAAM,QAAQ,UAAU"}
+{"version":3,"file":"index.js","names":["default","Provider","Composition","String","Number","Toggle","Indeterminate","Address","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password","Slider","Upload"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as Provider } from './Provider'\nexport { default as Composition } from './Composition'\nexport { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Indeterminate } from './Indeterminate'\nexport { default as Address } from './Address'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\nexport { default as Slider } from './Slider'\nexport { default as Upload } from './Upload'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAAQ,QAAQ,YAAY;AAChD,SAASD,OAAO,IAAIE,WAAW,QAAQ,eAAe;AACtD,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,MAAM,QAAQ,UAAU;AAC5C,SAASJ,OAAO,IAAIK,MAAM,QAAQ,UAAU;AAC5C,SAASL,OAAO,IAAIM,aAAa,QAAQ,iBAAiB;AAC1D,SAASN,OAAO,IAAIO,OAAO,QAAQ,WAAW;AAC9C,SAASP,OAAO,IAAIQ,OAAO,QAAQ,WAAW;AAC9C,SAASR,OAAO,IAAIS,QAAQ,QAAQ,YAAY;AAChD,SAAST,OAAO,IAAIU,IAAI,QAAQ,QAAQ;AACxC,SAASV,OAAO,IAAIW,KAAK,QAAQ,SAAS;AAC1C,SAASX,OAAO,IAAIY,IAAI,QAAQ,QAAQ;AACxC,SAASZ,OAAO,IAAIa,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASb,OAAO,IAAIc,WAAW,QAAQ,eAAe;AACtD,SAASd,OAAO,IAAIe,kBAAkB,QAAQ,sBAAsB;AACpE,SAASf,OAAO,IAAIgB,iBAAiB,QAAQ,qBAAqB;AAClE,SAAShB,OAAO,IAAIiB,SAAS,QAAQ,aAAa;AAClD,SAASjB,OAAO,IAAIkB,cAAc,QAAQ,kBAAkB;AAC5D,SAASlB,OAAO,IAAImB,MAAM,QAAQ,UAAU;AAC5C,SAASnB,OAAO,IAAIoB,aAAa,QAAQ,iBAAiB;AAC1D,SAASpB,OAAO,IAAIqB,iBAAiB,QAAQ,qBAAqB;AAClE,SAASrB,OAAO,IAAIsB,MAAM,QAAQ,UAAU;AAC5C,SAAStB,OAAO,IAAIuB,QAAQ,QAAQ,YAAY;AAChD,SAASvB,OAAO,IAAIwB,MAAM,QAAQ,UAAU;AAC5C,SAASxB,OAAO,IAAIyB,MAAM,QAAQ,UAAU"}

package/extensions/forms/FieldBlock/FieldBlock.js

@@ -318,7 +318,6 @@ function FieldBlock(props) {
     ref: contentsRef
   }, children), React.createElement(SubmitIndicator, {
     state: fieldState !== null && fieldState !== void 0 ? fieldState : fieldStateRef.current,
-    showLabel: true,
     className: "dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap"
   }))));
 }

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","useId","HelpButtonInline","HelpButtonInlineContent","SubmitIndicator","createSharedState","useTranslation","FormError","useIterateItemNo","states","FieldBlock","props","_props$id","dataContext","fieldBlockContext","nestedFieldBlockContext","disableStatusSummary","id","forId","sharedData","_Object$assign","Object","assign","data","className","layout","layoutOptions","composition","label","labelProp","labelDescription","labelSuffix","labelSrOnly","help","asFieldset","required","info","warning","error","errorProp","fieldState","disabled","width","contentWidth","labelHeight","align","labelSize","contentClassName","children","rest","_objectWithoutProperties","_excluded","hasCustomWidth","test","String","hasCustomContentWidth","blockId","salt","forceUpdate","mountedFieldsRef","fieldStateRef","stateRecordRef","fieldStateIdsRef","contentsRef","hasInitiallyErrorProp","Boolean","setInternalRecord","stateId","identifier","type","current","existingIndex","findIndex","item","_objectSpread","push","setBlockRecordNested","setBlockRecord","setFieldState","showFieldError","show","map","showInitially","statusContent","content","statesWithMessages","entries","flatMap","_ref","reduce","acc","cur","existing","find","messages","getMessagesFromError","message","undefined","state","width_element","no_animation","process","env","NODE_ENV","globalThis","IS_TEST","found","msg","filter","_ref2","i","arr","length","createElement","CombineMessages","mainClasses","gridClasses","enableFieldset","useEnableFieldset","labelProps","element","srOnly","space","size","mainStyle","_lO$minWidth","_lO$maxWidth","style","lO","min","getFieldWidth","minWidth","max","maxWidth","prerenderFieldProps","hasLabelDescription","isFragment","fragmentHasChildren","fragmentHasOnlyUndefinedChildren","hasHelp","title","Provider","value","hasErrorProp","_extends","contentId","breakout","outset","parseFloat","ref","showLabel","_ref3","result","count","child","_child$props","_child$type","_ref4","translations","Field","Fragment","errorSummary","stateSummary","_ref5","key","Array","isArray","errors","Error","isValidElement","toString","fragment","Children","isUndefined","toArray","every","_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'\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} from '../../../shared/component-helper'\nimport useId from '../../../shared/helpers/useId'\nimport {\n  ComponentProps,\n  FieldProps,\n  SubmitState,\n  Identifier,\n} from '../types'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n  HelpProps,\n} from '../../../components/help-button/HelpButtonInline'\nimport SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator'\nimport { createSharedState } from '../../../shared/helpers/useSharedState'\nimport useTranslation from '../hooks/useTranslation'\nimport { FormError } from '../utils'\nimport { useIterateItemNo } from '../Iterate/ItemNo/useIItemNo'\n\nexport const states: Array<StateTypes> = ['error', 'info', 'warning']\n\n/**\n * The width of a field block\n */\nexport type CustomWidth = `${number}rem`\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n  | CustomWidth\nexport type FieldBlockHorizontalLabelWidth =\n  | 'small'\n  | 'medium'\n  | 'large'\n  | CustomWidth\nexport type FieldBlockHorizontalLabelHeight =\n  | 'default'\n  | 'small'\n  | 'medium'\n  | 'large'\n\nexport type SharedFieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'vertical' | 'horizontal'\n  /** Use this to set additional options for the layout */\n  layoutOptions?: {\n    width?: FieldBlockHorizontalLabelWidth\n    minWidth?: FieldBlockHorizontalLabelWidth\n    maxWidth?: FieldBlockHorizontalLabelWidth\n  }\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * Will append an additional text to the label, like \"(optional)\" or \"(recommended)\"\n   */\n  labelSuffix?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Width of outer block element\n   */\n  width?: FieldBlockWidth\n  /**\n   * Width of contents block, while label etc can be wider if space is available\n   */\n  contentWidth?: FieldBlockWidth\n  /**\n   * Provide help content for the field.\n   */\n  help?: HelpProps\n}\n\nexport type Props = SharedFieldBlockProps &\n  Pick<\n    FieldProps,\n    keyof ComponentProps | 'info' | 'warning' | 'error' | '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    /** use `true` to make the label only readable by screen readers. */\n    labelSrOnly?: boolean\n    /** Defines the layout of nested fields */\n    composition?: FieldBlockContextProps['composition']\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    /** Defines the height of an component (size prop), so the label can be aligned correctly */\n    labelHeight?: FieldBlockHorizontalLabelHeight\n    /** Disable the error summary for this field block */\n    disableStatusSummary?: boolean\n    /** For internal use only */\n    required?: boolean\n    children?: React.ReactNode\n  } & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const nestedFieldBlockContext = !fieldBlockContext?.disableStatusSummary\n    ? fieldBlockContext\n    : null\n\n  const id = useId(props.id ?? props.forId)\n  const sharedData = createSharedState<Props>('field-block-props-' + id)\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    layoutOptions,\n    composition,\n    label: labelProp,\n    labelDescription,\n    labelSuffix,\n    labelSrOnly,\n    help,\n    asFieldset,\n    required,\n    info,\n    warning,\n    error: errorProp,\n    disableStatusSummary,\n    fieldState,\n    disabled,\n    width,\n    contentWidth,\n    labelHeight,\n    align,\n    labelSize,\n    contentClassName,\n    children,\n    ...rest\n  } = Object.assign({}, sharedData.data, props)\n  const hasCustomWidth = /\\d(rem)$/.test(String(width))\n  const hasCustomContentWidth = /\\d(rem)$/.test(String(contentWidth))\n\n  const blockId = useId(props.id)\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n  const mountedFieldsRef = useRef<MountedFieldsRef>({})\n  const fieldStateRef = useRef<SubmitState>(null)\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 = useIterateItemNo({\n    label: labelProp,\n    labelSuffix,\n    required,\n  })\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 setBlockRecordNested = nestedFieldBlockContext?.setBlockRecord\n  const setBlockRecord = useCallback(\n    (props: StateBasis) => {\n      if (setBlockRecordNested) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        setBlockRecordNested(props)\n        return\n      }\n\n      setInternalRecord(props)\n\n      forceUpdate()\n    },\n    [setBlockRecordNested, setInternalRecord]\n  )\n\n  const setFieldState = useCallback(\n    (identifier: Identifier, fieldState: SubmitState) => {\n      if (fieldState !== fieldStateRef.current) {\n        fieldStateRef.current = fieldState\n\n        forceUpdate()\n      }\n    },\n    []\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 messages = getMessagesFromError(cur).map((message) => {\n            return {\n              ...cur,\n              message,\n            }\n          })\n\n          if (existing) {\n            existing.messages.push(...messages)\n          } else {\n            acc.push({\n              ...cur,\n              content: undefined,\n              messages,\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            children: <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    }, salt) as StatusContent\n  }, [\n    errorProp,\n    warning,\n    info,\n    salt,\n    setInternalRecord,\n    blockId,\n    hasInitiallyErrorProp,\n    props.id,\n    forId,\n    label,\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  useEffect(\n    () => () => {\n      mountedFieldsRef.current = {}\n      stateRecordRef.current = {}\n    },\n    []\n  )\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width &&\n      `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`,\n    contentWidth &&\n      `dnb-forms-field-block--content-width-${\n        hasCustomContentWidth ? 'custom' : contentWidth\n      }`,\n    labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`,\n    composition && 'dnb-forms-field-block__composition',\n    composition &&\n      `dnb-forms-field-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`,\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    id: `${id}-label`,\n    className: 'dnb-forms-field-block__label',\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    srOnly: labelSrOnly,\n    space: 0, // Use CSS for spacing, but we need to reset space for doing so\n    size: labelSize,\n    disabled,\n  }\n\n  const mainStyle = useMemo(() => {\n    const style: React.CSSProperties = {}\n\n    if (hasCustomWidth) {\n      style['--dnb-forms-field-block-width'] = width\n    }\n\n    if (hasCustomContentWidth) {\n      style['--dnb-forms-field-block-content-width'] = contentWidth\n    }\n\n    const lO = layoutOptions || {}\n    const min = getFieldWidth(lO.minWidth ?? lO.width)\n    const max = getFieldWidth(lO.maxWidth ?? lO.width)\n\n    if (typeof min === 'string') {\n      style['--dnb-forms-field-block-layout-width-min'] = min\n    }\n    if (typeof max === 'string') {\n      style['--dnb-forms-field-block-layout-width-max'] = max\n    }\n\n    return style\n  }, [\n    contentWidth,\n    hasCustomContentWidth,\n    hasCustomWidth,\n    layoutOptions,\n    width,\n  ])\n\n  if (dataContext?.prerenderFieldProps) {\n    return null\n  }\n\n  const hasLabelDescription = isFragment(labelDescription)\n    ? fragmentHasChildren(labelDescription) &&\n      !fragmentHasOnlyUndefinedChildren(labelDescription)\n    : labelDescription\n  const hasHelp = help?.title || help?.content\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setBlockRecord,\n        setFieldState,\n        showFieldError,\n        hasErrorProp: Boolean(errorProp),\n        fieldStateIdsRef,\n        mountedFieldsRef,\n        composition,\n        disableStatusSummary,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        style={mainStyle}\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {(label || labelDescription || hasHelp) && (\n            <FormLabel {...labelProps}>\n              <span>\n                {label && (\n                  <span className=\"dnb-forms-field-block__label__content\">\n                    {label}\n                  </span>\n                )}\n\n                {hasLabelDescription && (\n                  <span className=\"dnb-forms-field-block__label__description\">\n                    {labelDescription}\n                  </span>\n                )}\n\n                {hasHelp && (\n                  <HelpButtonInline contentId={`${id}-help`} help={help} />\n                )}\n              </span>\n            </FormLabel>\n          )}\n\n          {hasHelp && (\n            <HelpButtonInlineContent\n              contentId={`${id}-help`}\n              className=\"dnb-forms-field-block__help\"\n              help={help}\n              breakout={\n                layout === 'vertical' &&\n                !nestedFieldBlockContext?.composition\n              }\n              outset={layout !== 'horizontal'}\n            />\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__status',\n\n              // Handle the width of the status messages\n              contentWidth &&\n                contentWidth !== 'small' &&\n                contentWidth !== 'medium' &&\n                !(parseFloat(contentWidth) <= 11) &&\n                `dnb-forms-field-block__contents--width-${\n                  hasCustomContentWidth ? 'custom' : contentWidth\n                }`\n            )}\n          >\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-${\n                  hasCustomContentWidth ? 'custom' : contentWidth\n                }`,\n              align && `dnb-forms-field-block__contents--align-${align}`,\n              contentClassName\n            )}\n            ref={contentsRef}\n          >\n            {children}\n          </div>\n\n          <SubmitIndicator\n            state={fieldState ?? fieldStateRef.current}\n            showLabel\n            className=\"dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap\"\n          />\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\nexport function getMessagesFromError(\n  item: Partial<StateWithMessage>\n): Array<StateMessage> {\n  const { content } = item\n\n  if (content instanceof FormError && Array.isArray(content.errors)) {\n    return content.errors.map((error) => {\n      return error.message\n    })\n  }\n\n  if (Array.isArray(content)) {\n    return content.map((content) => {\n      return content instanceof FormError || content instanceof Error\n        ? content.message\n        : content\n    })\n  }\n\n  if (content instanceof FormError || content instanceof Error) {\n    return [content.message as StateMessage]\n  }\n\n  return [\n    ((React.isValidElement(content) ? content : content?.toString()) ||\n      content) as StateMessage,\n  ]\n}\n\nfunction isFragment(fragment: React.ReactNode) {\n  return React.isValidElement(fragment) && fragment.type === React.Fragment\n}\n\nfunction fragmentHasChildren(fragment: React.ReactNode) {\n  return (\n    React.isValidElement(fragment) &&\n    React.Children.count(fragment.props.children) > 0\n  )\n}\n\nfunction fragmentHasOnlyUndefinedChildren(fragment: React.ReactNode) {\n  const isUndefined = (child) => child === undefined\n\n  return (\n    React.isValidElement(fragment) &&\n    React.Children.toArray(fragment.props.children).every(isUndefined)\n  )\n}\n\nFieldBlock._supportsSpacingProps = true\n\nexport default FieldBlock\n\nfunction getFieldWidth(width: FieldBlockHorizontalLabelWidth) {\n  switch (width) {\n    case 'small':\n      return 'var(--forms-field-width--small)'\n    case 'medium':\n      return 'var(--forms-field-width--medium)'\n    case 'large':\n      return 'var(--forms-field-width--large)'\n  }\n\n  return width\n}\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useCallback","useRef","useReducer","useEffect","classnames","FieldBlockContext","DataContext","Space","FormLabel","FormStatus","Ul","Li","convertJsxToString","findElementInChildren","useId","HelpButtonInline","HelpButtonInlineContent","SubmitIndicator","createSharedState","useTranslation","FormError","useIterateItemNo","states","FieldBlock","props","_props$id","dataContext","fieldBlockContext","nestedFieldBlockContext","disableStatusSummary","id","forId","sharedData","_Object$assign","Object","assign","data","className","layout","layoutOptions","composition","label","labelProp","labelDescription","labelSuffix","labelSrOnly","help","asFieldset","required","info","warning","error","errorProp","fieldState","disabled","width","contentWidth","labelHeight","align","labelSize","contentClassName","children","rest","_objectWithoutProperties","_excluded","hasCustomWidth","test","String","hasCustomContentWidth","blockId","salt","forceUpdate","mountedFieldsRef","fieldStateRef","stateRecordRef","fieldStateIdsRef","contentsRef","hasInitiallyErrorProp","Boolean","setInternalRecord","stateId","identifier","type","current","existingIndex","findIndex","item","_objectSpread","push","setBlockRecordNested","setBlockRecord","setFieldState","showFieldError","show","map","showInitially","statusContent","content","statesWithMessages","entries","flatMap","_ref","reduce","acc","cur","existing","find","messages","getMessagesFromError","message","undefined","state","width_element","no_animation","process","env","NODE_ENV","globalThis","IS_TEST","found","msg","filter","_ref2","i","arr","length","createElement","CombineMessages","mainClasses","gridClasses","enableFieldset","useEnableFieldset","labelProps","element","srOnly","space","size","mainStyle","_lO$minWidth","_lO$maxWidth","style","lO","min","getFieldWidth","minWidth","max","maxWidth","prerenderFieldProps","hasLabelDescription","isFragment","fragmentHasChildren","fragmentHasOnlyUndefinedChildren","hasHelp","title","Provider","value","hasErrorProp","_extends","contentId","breakout","outset","parseFloat","ref","_ref3","result","count","child","_child$props","_child$type","_ref4","translations","Field","Fragment","errorSummary","stateSummary","_ref5","key","Array","isArray","errors","Error","isValidElement","toString","fragment","Children","isUndefined","toArray","every","_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'\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} from '../../../shared/component-helper'\nimport useId from '../../../shared/helpers/useId'\nimport {\n  ComponentProps,\n  FieldProps,\n  SubmitState,\n  Identifier,\n} from '../types'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n  HelpProps,\n} from '../../../components/help-button/HelpButtonInline'\nimport SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator'\nimport { createSharedState } from '../../../shared/helpers/useSharedState'\nimport useTranslation from '../hooks/useTranslation'\nimport { FormError } from '../utils'\nimport { useIterateItemNo } from '../Iterate/ItemNo/useIItemNo'\n\nexport const states: Array<StateTypes> = ['error', 'info', 'warning']\n\n/**\n * The width of a field block\n */\nexport type CustomWidth = `${number}rem`\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n  | CustomWidth\nexport type FieldBlockHorizontalLabelWidth =\n  | 'small'\n  | 'medium'\n  | 'large'\n  | CustomWidth\nexport type FieldBlockHorizontalLabelHeight =\n  | 'default'\n  | 'small'\n  | 'medium'\n  | 'large'\n\nexport type SharedFieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'vertical' | 'horizontal'\n  /** Use this to set additional options for the layout */\n  layoutOptions?: {\n    width?: FieldBlockHorizontalLabelWidth\n    minWidth?: FieldBlockHorizontalLabelWidth\n    maxWidth?: FieldBlockHorizontalLabelWidth\n  }\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * Will append an additional text to the label, like \"(optional)\" or \"(recommended)\"\n   */\n  labelSuffix?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Width of outer block element\n   */\n  width?: FieldBlockWidth\n  /**\n   * Width of contents block, while label etc can be wider if space is available\n   */\n  contentWidth?: FieldBlockWidth\n  /**\n   * Provide help content for the field.\n   */\n  help?: HelpProps\n}\n\nexport type Props = SharedFieldBlockProps &\n  Pick<\n    FieldProps,\n    keyof ComponentProps | 'info' | 'warning' | 'error' | '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    /** use `true` to make the label only readable by screen readers. */\n    labelSrOnly?: boolean\n    /** Defines the layout of nested fields */\n    composition?: FieldBlockContextProps['composition']\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    /** Defines the height of an component (size prop), so the label can be aligned correctly */\n    labelHeight?: FieldBlockHorizontalLabelHeight\n    /** Disable the error summary for this field block */\n    disableStatusSummary?: boolean\n    /** For internal use only */\n    required?: boolean\n    children?: React.ReactNode\n  } & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const nestedFieldBlockContext = !fieldBlockContext?.disableStatusSummary\n    ? fieldBlockContext\n    : null\n\n  const id = useId(props.id ?? props.forId)\n  const sharedData = createSharedState<Props>('field-block-props-' + id)\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    layoutOptions,\n    composition,\n    label: labelProp,\n    labelDescription,\n    labelSuffix,\n    labelSrOnly,\n    help,\n    asFieldset,\n    required,\n    info,\n    warning,\n    error: errorProp,\n    disableStatusSummary,\n    fieldState,\n    disabled,\n    width,\n    contentWidth,\n    labelHeight,\n    align,\n    labelSize,\n    contentClassName,\n    children,\n    ...rest\n  } = Object.assign({}, sharedData.data, props)\n  const hasCustomWidth = /\\d(rem)$/.test(String(width))\n  const hasCustomContentWidth = /\\d(rem)$/.test(String(contentWidth))\n\n  const blockId = useId(props.id)\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n  const mountedFieldsRef = useRef<MountedFieldsRef>({})\n  const fieldStateRef = useRef<SubmitState>(null)\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 = useIterateItemNo({\n    label: labelProp,\n    labelSuffix,\n    required,\n  })\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 setBlockRecordNested = nestedFieldBlockContext?.setBlockRecord\n  const setBlockRecord = useCallback(\n    (props: StateBasis) => {\n      if (setBlockRecordNested) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        setBlockRecordNested(props)\n        return\n      }\n\n      setInternalRecord(props)\n\n      forceUpdate()\n    },\n    [setBlockRecordNested, setInternalRecord]\n  )\n\n  const setFieldState = useCallback(\n    (identifier: Identifier, fieldState: SubmitState) => {\n      if (fieldState !== fieldStateRef.current) {\n        fieldStateRef.current = fieldState\n\n        forceUpdate()\n      }\n    },\n    []\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 messages = getMessagesFromError(cur).map((message) => {\n            return {\n              ...cur,\n              message,\n            }\n          })\n\n          if (existing) {\n            existing.messages.push(...messages)\n          } else {\n            acc.push({\n              ...cur,\n              content: undefined,\n              messages,\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            children: <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    }, salt) as StatusContent\n  }, [\n    errorProp,\n    warning,\n    info,\n    salt,\n    setInternalRecord,\n    blockId,\n    hasInitiallyErrorProp,\n    props.id,\n    forId,\n    label,\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  useEffect(\n    () => () => {\n      mountedFieldsRef.current = {}\n      stateRecordRef.current = {}\n    },\n    []\n  )\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width &&\n      `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`,\n    contentWidth &&\n      `dnb-forms-field-block--content-width-${\n        hasCustomContentWidth ? 'custom' : contentWidth\n      }`,\n    labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`,\n    composition && 'dnb-forms-field-block__composition',\n    composition &&\n      `dnb-forms-field-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`,\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    id: `${id}-label`,\n    className: 'dnb-forms-field-block__label',\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    srOnly: labelSrOnly,\n    space: 0, // Use CSS for spacing, but we need to reset space for doing so\n    size: labelSize,\n    disabled,\n  }\n\n  const mainStyle = useMemo(() => {\n    const style: React.CSSProperties = {}\n\n    if (hasCustomWidth) {\n      style['--dnb-forms-field-block-width'] = width\n    }\n\n    if (hasCustomContentWidth) {\n      style['--dnb-forms-field-block-content-width'] = contentWidth\n    }\n\n    const lO = layoutOptions || {}\n    const min = getFieldWidth(lO.minWidth ?? lO.width)\n    const max = getFieldWidth(lO.maxWidth ?? lO.width)\n\n    if (typeof min === 'string') {\n      style['--dnb-forms-field-block-layout-width-min'] = min\n    }\n    if (typeof max === 'string') {\n      style['--dnb-forms-field-block-layout-width-max'] = max\n    }\n\n    return style\n  }, [\n    contentWidth,\n    hasCustomContentWidth,\n    hasCustomWidth,\n    layoutOptions,\n    width,\n  ])\n\n  if (dataContext?.prerenderFieldProps) {\n    return null\n  }\n\n  const hasLabelDescription = isFragment(labelDescription)\n    ? fragmentHasChildren(labelDescription) &&\n      !fragmentHasOnlyUndefinedChildren(labelDescription)\n    : labelDescription\n  const hasHelp = help?.title || help?.content\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setBlockRecord,\n        setFieldState,\n        showFieldError,\n        hasErrorProp: Boolean(errorProp),\n        fieldStateIdsRef,\n        mountedFieldsRef,\n        composition,\n        disableStatusSummary,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        style={mainStyle}\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {(label || labelDescription || hasHelp) && (\n            <FormLabel {...labelProps}>\n              <span>\n                {label && (\n                  <span className=\"dnb-forms-field-block__label__content\">\n                    {label}\n                  </span>\n                )}\n\n                {hasLabelDescription && (\n                  <span className=\"dnb-forms-field-block__label__description\">\n                    {labelDescription}\n                  </span>\n                )}\n\n                {hasHelp && (\n                  <HelpButtonInline contentId={`${id}-help`} help={help} />\n                )}\n              </span>\n            </FormLabel>\n          )}\n\n          {hasHelp && (\n            <HelpButtonInlineContent\n              contentId={`${id}-help`}\n              className=\"dnb-forms-field-block__help\"\n              help={help}\n              breakout={\n                layout === 'vertical' &&\n                !nestedFieldBlockContext?.composition\n              }\n              outset={layout !== 'horizontal'}\n            />\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__status',\n\n              // Handle the width of the status messages\n              contentWidth &&\n                contentWidth !== 'small' &&\n                contentWidth !== 'medium' &&\n                !(parseFloat(contentWidth) <= 11) &&\n                `dnb-forms-field-block__contents--width-${\n                  hasCustomContentWidth ? 'custom' : contentWidth\n                }`\n            )}\n          >\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-${\n                  hasCustomContentWidth ? 'custom' : contentWidth\n                }`,\n              align && `dnb-forms-field-block__contents--align-${align}`,\n              contentClassName\n            )}\n            ref={contentsRef}\n          >\n            {children}\n          </div>\n\n          <SubmitIndicator\n            state={fieldState ?? fieldStateRef.current}\n            className=\"dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap\"\n          />\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\nexport function getMessagesFromError(\n  item: Partial<StateWithMessage>\n): Array<StateMessage> {\n  const { content } = item\n\n  if (content instanceof FormError && Array.isArray(content.errors)) {\n    return content.errors.map((error) => {\n      return error.message\n    })\n  }\n\n  if (Array.isArray(content)) {\n    return content.map((content) => {\n      return content instanceof FormError || content instanceof Error\n        ? content.message\n        : content\n    })\n  }\n\n  if (content instanceof FormError || content instanceof Error) {\n    return [content.message as StateMessage]\n  }\n\n  return [\n    ((React.isValidElement(content) ? content : content?.toString()) ||\n      content) as StateMessage,\n  ]\n}\n\nfunction isFragment(fragment: React.ReactNode) {\n  return React.isValidElement(fragment) && fragment.type === React.Fragment\n}\n\nfunction fragmentHasChildren(fragment: React.ReactNode) {\n  return (\n    React.isValidElement(fragment) &&\n    React.Children.count(fragment.props.children) > 0\n  )\n}\n\nfunction fragmentHasOnlyUndefinedChildren(fragment: React.ReactNode) {\n  const isUndefined = (child) => child === undefined\n\n  return (\n    React.isValidElement(fragment) &&\n    React.Children.toArray(fragment.props.children).every(isUndefined)\n  )\n}\n\nFieldBlock._supportsSpacingProps = true\n\nexport default FieldBlock\n\nfunction getFieldWidth(width: FieldBlockHorizontalLabelWidth) {\n  switch (width) {\n    case 'small':\n      return 'var(--forms-field-width--small)'\n    case 'medium':\n      return 'var(--forms-field-width--medium)'\n    case 'large':\n      return 'var(--forms-field-width--large)'\n  }\n\n  return width\n}\n"],"mappings":"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"}

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

@@ -114,6 +114,10 @@ fieldset.dnb-forms-field-block:not([class*=space__right]) {
 }
 .dnb-forms-field-block__indicator {
   grid-area: indicator;
+  position: relative;
+}
+.dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content {
+  position: absolute;
 }
 .dnb-forms-field-block__help {
   grid-area: help;

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}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__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}.dnb-forms-field-block{--label-margin:0.25rem;--max-width:var(--forms-field-width--large)}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}.dnb-forms-field-block--width-stretch label.dnb-form-label{max-width:none}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.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:not([class*="--content-width"]){--max-width:60ch}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--max-width)}.dnb-forms-field-block__label.dnb-form-label__description,.dnb-forms-field-block__label__description{margin-left:.3em}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.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__composition--vertical .dnb-forms-field-block__contents{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{align-items:flex-end}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-submit-indicator{display:none}}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-field-block__contents .dnb-forms-submit-indicator{display:none}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}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__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}.dnb-forms-field-block{--label-margin:0.25rem;--max-width:var(--forms-field-width--large)}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}.dnb-forms-field-block--width-stretch label.dnb-form-label{max-width:none}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.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:not([class*="--content-width"]){--max-width:60ch}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--max-width)}.dnb-forms-field-block__label.dnb-form-label__description,.dnb-forms-field-block__label__description{margin-left:.3em}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator;position:relative}.dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content{position:absolute}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.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__composition--vertical .dnb-forms-field-block__contents{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{align-items:flex-end}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-submit-indicator{display:none}}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-field-block__contents .dnb-forms-submit-indicator{display:none}}

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

@@ -146,6 +146,11 @@ fieldset.dnb-forms-field-block {
 
   &__indicator {
     grid-area: indicator;
+
+    position: relative;
+    .dnb-forms-submit-indicator__content {
+      position: absolute;
+    }
   }
 
   &__help {

package/extensions/forms/Iterate/Array/Array.js

@@ -29,6 +29,7 @@ function ArrayComponent(props) {
   const {
     path: pathProp,
     itemPath: itemPathProp,
+    reverse,
     countPath,
     countPathTransform,
     countPathLimit = Infinity
@@ -143,7 +144,7 @@ function ArrayComponent(props) {
     var _ref2;
     const list = (_ref2 = valueWhileClosingRef.current || arrayValue) !== null && _ref2 !== void 0 ? _ref2 : [];
     const limitedList = typeof limit === 'number' ? list.slice(0, limit) : list;
-    return limitedList.map((value, index) => {
+    const arrayItems = limitedList.map((value, index) => {
       var _valueCountRef$curren, _modesRef$current$id;
       const id = idsRef.current[index] || makeUniqueId();
       const hasNewItems = (arrayValue === null || arrayValue === void 0 ? void 0 : arrayValue.length) > ((_valueCountRef$curren = valueCountRef.current) === null || _valueCountRef$curren === void 0 ? void 0 : _valueCountRef$curren.length);
@@ -223,7 +224,11 @@ function ArrayComponent(props) {
       };
       return itemContext;
     });
-  }, [salt, arrayValue, limit, path, itemPath, absolutePath, handleChange]);
+    if (reverse) {
+      return arrayItems.reverse();
+    }
+    return arrayItems;
+  }, [salt, arrayValue, limit, path, itemPath, absolutePath, reverse, handleChange]);
   const total = arrayItems.length;
   useEffect(() => {
     if (limit) {