@dnb/eufemia 10.15.0 → 10.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","ToggleButtonGroupContext","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","handleRadioChange","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","createElement","Group","_extends","layout_direction","vertical","on_change","String","i","_option$value","key","Provider","status","length","text","checked","_error$message","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const handleRadioChange = 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 useDataValues 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('dnb-forms-field-selection', className)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            handleChange?.(selected === value ? emptyValue : selected)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'radio':\n      return (\n        <Radio.Group\n          className={cn}\n          label={label}\n          layout_direction={\n            optionsLayout === 'horizontal' ? 'row' : 'column'\n          }\n          vertical={layout === 'vertical'}\n          on_change={handleRadioChange}\n          value={String(value ?? '')}\n          {...pickSpacingProps(props)}\n        >\n          {options.map((option, i) => (\n            <Radio\n              key={`option-${i}-${option.value}`}\n              label={option.title}\n              value={String(option.value ?? '')}\n            />\n          ))}\n        </Radio.Group>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <ToggleButtonGroupContext.Provider\n              value={{\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              {options.map((option, i) => (\n                <ToggleButton\n                  id={options.length > 0 ? id : undefined}\n                  key={`option-${i}-${option.value}`}\n                  text={option.title}\n                  on_change={option.handleSelect}\n                  checked={option.value === value}\n                />\n              ))}\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={\n            error?.message ??\n            ((warning instanceof Error && warning.message) ||\n              (warning instanceof FormError && warning.message) ||\n              warning?.toString() ||\n              (info instanceof Error && info.message) ||\n              (info instanceof FormError && info.message) ||\n              info?.toString())\n          }\n          disabled={disabled}\n          data={data}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_change={handleDropdownChange}\n          on_show={handleShow}\n          on_hide={handleHide}\n          {...pickSpacingProps(props)}\n          stretch={width === 'stretch'}\n        />\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","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ 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 useDataValues 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__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\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      return (\n        <FieldBlock {...fieldBlockProps}>\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            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={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={status && 'error'}\n            disabled={disabled}\n            data={data}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.contents}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            {...pickSpacingProps(props)}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-.dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: var(--forms-field-width--large);
+.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+  align-self: center;
 }
-.dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: var(--forms-field-width--medium);
+.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+  margin-bottom: 0;
 }
-.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
-  width: var(--forms-field-width--small);
+.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+  line-height: 2.5rem;
 }

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

@@ -1 +1 @@
-.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:var(--forms-field-width--large)}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:var(--forms-field-width--medium)}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:var(--forms-field-width--small)}
+.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}

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

@@ -1,18 +1,23 @@
 .dnb-forms-field-selection {
-  &--width {
-    &-large {
-      .dnb-dropdown__shell {
-        width: var(--forms-field-width--large);
+  &__variant--dropdown {
+    .dnb-forms-field-block {
+      &--layout-horizontal .dnb-form-label {
+        align-self: center;
       }
     }
-    &-medium {
-      .dnb-dropdown__shell {
-        width: var(--forms-field-width--medium);
+  }
+  &__variant--dropdown,
+  &__options-layout--horizontal {
+    .dnb-forms-field-block {
+      &--layout-horizontal .dnb-form-label {
+        margin-bottom: 0;
       }
     }
-    &-small {
-      .dnb-dropdown__shell {
-        width: var(--forms-field-width--small);
+  }
+  &__variant--button {
+    .dnb-forms-field-block {
+      &--layout-horizontal .dnb-form-label {
+        line-height: 2.5rem;
       }
     }
   }

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

@@ -19,6 +19,7 @@ export type Props = FieldHelpProps & FieldProps<string, undefined | string, Erro
     clear?: boolean;
     autoresize?: boolean;
     autoComplete?: HTMLInputElement['autocomplete'];
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
     autoresizeMaxRows?: number;
     characterCounter?: boolean;
     mask?: InputMaskedProps['mask'];

package/extensions/forms/Field/String/String.js

@@ -31,15 +31,17 @@ function StringComponent(props) {
       pattern: props.pattern
     };
   }, [props.schema, props.minLength, props.maxLength, props.pattern]);
-  const fromInput = useCallback(_ref => {
-    let {
-      value,
-      cleanedValue
-    } = _ref;
-    if (value === '') {
+  const fromInput = useCallback(event => {
+    var _event, _event$cleanedValue, _event2, _event3;
+    if (typeof event === 'string') {
+      event = {
+        value: event
+      };
+    }
+    if (((_event = event) === null || _event === void 0 ? void 0 : _event.value) === '') {
       return props.emptyValue;
     }
-    return cleanedValue !== null && cleanedValue !== void 0 ? cleanedValue : value;
+    return (_event$cleanedValue = (_event2 = event) === null || _event2 === void 0 ? void 0 : _event2.cleanedValue) !== null && _event$cleanedValue !== void 0 ? _event$cleanedValue : (_event3 = event) === null || _event3 === void 0 ? void 0 : _event3.value;
   }, [props.emptyValue]);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
     errorMessages,
@@ -52,6 +54,7 @@ function StringComponent(props) {
     name,
     className,
     autoComplete,
+    inputMode,
     innerRef,
     inputClassName,
     layout,
@@ -64,6 +67,7 @@ function StringComponent(props) {
     info,
     warning,
     error,
+    hasError,
     disabled,
     help,
     multiline,
@@ -85,6 +89,7 @@ function StringComponent(props) {
     id,
     name,
     autoComplete,
+    inputMode,
     className: cn,
     placeholder: placeholder,
     suffix: help ? React.createElement(HelpButton, {
@@ -96,7 +101,7 @@ function StringComponent(props) {
     disabled: disabled,
     stretch: width !== undefined,
     inner_ref: innerRef,
-    status: error ? 'error' : undefined,
+    status: error || hasError ? 'error' : undefined,
     value: (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : ''
   };
   return React.createElement(FieldBlock, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","StringComponent","props","_props$width","_value$length","_value$length2","_value$toString","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","_ref","value","cleanedValue","emptyValue","preparedProps","width","id","name","className","autoComplete","innerRef","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","handleChange","characterCounterElement","length","undefined","cn","sharedProps","suffix","createElement","title","contents","on_focus","on_blur","on_change","stretch","inner_ref","status","toString","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { JSONSchema7 } from 'json-schema'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minLength: tr.stringInputErrorMinLength,\n      maxLength: tr.stringInputErrorMaxLength,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    ({ value, cleanedValue }: { value: string; cleanedValue: string }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    [props.emptyValue]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.contents}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled: disabled,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: error ? 'error' : undefined,\n    value: value?.toString() ?? '',\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","StringComponent","props","_props$width","_value$length","_value$length2","_value$toString","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","preparedProps","width","id","name","className","autoComplete","inputMode","innerRef","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","hasError","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","handleChange","characterCounterElement","length","undefined","cn","sharedProps","suffix","createElement","title","contents","on_focus","on_blur","on_change","stretch","inner_ref","status","toString","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { JSONSchema7 } from 'json-schema'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minLength: tr.stringInputErrorMinLength,\n      maxLength: tr.stringInputErrorMaxLength,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputMode,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.contents}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled: disabled,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: error || hasError ? 'error' : undefined,\n    value: value?.toString() ?? '',\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/FieldBlock.js

@@ -156,7 +156,7 @@ function useEnableFieldset(_ref4) {
       let count = 0;
       findElementInChildren(children, child => {
         var _child$props, _child$type;
-        if (typeof (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.label) !== 'undefined' || (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type['_formElement']) === true) {
+        if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.label || (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type['_formElement']) === true) {
           count++;
         }
         if (count > 1) {
@@ -165,7 +165,7 @@ function useEnableFieldset(_ref4) {
       });
     }
     return Boolean(result);
-  }, [children]);
+  }, [asFieldset, children, label, nestedFieldBlockContext]);
 }
 FieldBlock._supportsSpacingProps = true;
 export default FieldBlock;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","disabled","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","identifier","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","_ref","_ref2","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","Label","_ref3","createElement","element","space","top","bottom","Provider","value","_extends","Fragment","id","text","toString","_ref4","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    disabled,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (identifier, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(identifier, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [identifier]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (identifier, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(identifier, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [identifier]: true,\n          }\n        } else {\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([identifier]) => showFieldErrorRecord[identifier] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const Label = ({ children }) => {\n    return (\n      <FormLabel\n        element={enableFieldset ? 'legend' : 'label'}\n        forId={enableFieldset ? undefined : forId}\n        space={{ top: 0, bottom: 'x-small' }}\n        size={size}\n        disabled={disabled}\n      >\n        {children}\n      </FormLabel>\n    )\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription || labelSecondary ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <Label>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </Label>\n              ) : (\n                <>&nbsp;</>\n              )}\n              {labelSecondary && (\n                <span className=\"dnb-forms-field-block__label-secondary\">\n                  {labelSecondary}\n                </span>\n              )}\n            </div>\n          ) : (\n            label && <Label>{label}</Label>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\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    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          typeof child?.props?.label !== 'undefined' ||\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  }, [children])\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","disabled","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","identifier","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","_ref","_ref2","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","Label","_ref3","createElement","element","space","top","bottom","Provider","value","_extends","Fragment","id","text","toString","_ref4","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    disabled,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (identifier, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(identifier, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [identifier]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (identifier, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(identifier, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [identifier]: true,\n          }\n        } else {\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([identifier]) => showFieldErrorRecord[identifier] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const Label = ({ children }) => {\n    return (\n      <FormLabel\n        element={enableFieldset ? 'legend' : 'label'}\n        forId={enableFieldset ? undefined : forId}\n        space={{ top: 0, bottom: 'x-small' }}\n        size={size}\n        disabled={disabled}\n      >\n        {children}\n      </FormLabel>\n    )\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription || labelSecondary ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <Label>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </Label>\n              ) : (\n                <>&nbsp;</>\n              )}\n              {labelSecondary && (\n                <span className=\"dnb-forms-field-block__label-secondary\">\n                  {labelSecondary}\n                </span>\n              )}\n            </div>\n          ) : (\n            label && <Label>{label}</Label>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\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    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\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

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

@@ -32,7 +32,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   grid-template-areas: "label" "contents" "status";
 }
 .dnb-forms-field-block--layout-horizontal {
-  grid-template-columns: var(--forms-field-width--medium) auto;
+  grid-template-columns: fit-content(100%) auto;
   grid-template-areas: "label contents" "status status";
 }
 .dnb-forms-field-block--width-stretch {

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__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.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)}}
+: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__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.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)}}

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

@@ -19,7 +19,7 @@ fieldset.dnb-forms-field-block {
         'status';
     }
     &-horizontal {
-      grid-template-columns: var(--forms-field-width--medium) auto;
+      grid-template-columns: fit-content(100%) auto;
       grid-template-areas:
         'label contents'
         'status status';

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.css

@@ -1,7 +1,14 @@
+/*
+ * Utilities
+ */
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  grid-column-gap: var(--spacing-small);
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-card + .dnb-forms-button-row:not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
 }

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.min.css

@@ -1 +1 @@
-.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}
+.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.scss

@@ -1,5 +1,15 @@
+@import '../../../../../style/core/utilities.scss';
+
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
   column-gap: var(--spacing-small);
+
+  .dnb-card + & {
+    &:not([class*='space__left']) {
+      @include allAbove(small) {
+        margin-left: var(--spacing-medium);
+      }
+    }
+  }
 }

package/extensions/forms/Form/Handler/Handler.js

@@ -26,9 +26,9 @@ export default function FormHandler(_ref) {
     schema,
     onChange,
     onPathChange,
-    onSubmit: data => {
+    onSubmit: function () {
       if (typeof onSubmit === 'function') {
-        onSubmit(data);
+        onSubmit(...arguments);
       }
     },
     onSubmitRequest,

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

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    defaultData,\n    data,\n    schema,\n    onChange,\n    onPathChange,\n    onSubmit: (data: Data) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(data)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAa8B;EAAA,IAbJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAX,IAAA;IAD1DY,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBb,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAGJ,IAAU,IAAK;MACxB,IAAI,OAAOI,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAACJ,IAAI,CAAC;MAChB;IACF,CAAC;IACDK,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACEf,KAAA,CAAAoB,aAAA,CAACnB,QAAQ,EAAKkB,aAAa,EACzBnB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAKc,IAAI,EAAGX,QAAsB,CACtC,CAAC;AAEf"}
+{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","arguments","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    defaultData,\n    data,\n    schema,\n    onChange,\n    onPathChange,\n    onSubmit: (...args) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(...args)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAa8B;EAAA,IAbJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAX,IAAA;IAD1DY,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBb,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE,SAAAA,CAAA,EAAa;MACrB,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAAC,GAAAS,SAAO,CAAC;MACnB;IACF,CAAC;IACDR,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACEf,KAAA,CAAAqB,aAAA,CAACpB,QAAQ,EAAKkB,aAAa,EACzBnB,KAAA,CAAAqB,aAAA,CAACnB,WAAW,EAAKc,IAAI,EAAGX,QAAsB,CACtC,CAAC;AAEf"}

package/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.css

@@ -1,14 +1,13 @@
+/*
+ * Utilities
+ */
 .dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
-.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__left]) {
-  margin-left: var(--spacing-medium);
-}
-.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
-  margin-left: var(--spacing-medium);
-}
-.dnb-form-main-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
-  margin-bottom: var(--spacing-small);
+@media screen and (min-width: 40em) {
+  .dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
 }
 .dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);

package/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.min.css

@@ -1 +1 @@
-.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}.dnb-form-main-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}
+.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]){margin:0}@media screen and (min-width:40em){.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-form-main-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}

package/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss

@@ -1,3 +1,5 @@
+@import '../../../../../style/core/utilities.scss';
+
 .dnb-form-main-heading {
   // Reset inherited spacing
   .dnb-spacing & {
@@ -8,8 +10,11 @@
 
   &:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card) {
     &:not([class*='space__left']) {
-      margin-left: var(--spacing-medium);
+      @include allAbove(small) {
+        margin-left: var(--spacing-medium);
+      }
     }
+
     &:not([class*='space__bottom']) {
       margin-bottom: var(--spacing-small);
     }

package/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.css

@@ -1,9 +1,9 @@
+/*
+ * Utilities
+ */
 .dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
   margin: 0;
 }
-.dnb-form-sub-heading[\:has\(\%2B\%20.dnb-flex-stack\%20\%3E\%20.dnb-card\,\%20\%2B\%20.dnb-card\)]:not([class*=space__bottom]) {
-  margin-bottom: var(--spacing-small);
-}
 .dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }

package/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.min.css

@@ -1 +1 @@
-.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading[\:has\(\%2B\%20\.dnb-flex-stack\%20\%3E\%20\.dnb-card\,\%20\%2B\%20\.dnb-card\)]:not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}
+.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-form-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}

package/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss

@@ -1,3 +1,5 @@
+@import '../../../../../style/core/utilities.scss';
+
 .dnb-form-sub-heading {
   // Reset inherited spacing
   .dnb-spacing & {

package/extensions/forms/StepsLayout/NextButton/NextButton.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { Button } from '../../../../components';
 import SharedContext from '../../../../shared/Context';
 import StepsContext from '../StepsContext';
+import ButtonRow from '../../Form/ButtonRow';
 function NextButton(props) {
   const sharedContext = useContext(SharedContext);
   const {
@@ -16,13 +17,13 @@ function NextButton(props) {
     children = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stepNext
   } = props;
   const stepsContext = useContext(StepsContext);
-  return React.createElement(Button, _extends({}, props, {
+  return React.createElement(ButtonRow, null, React.createElement(Button, _extends({}, props, {
     className: classnames('dnb-forms-next-button', className),
     onClick: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.handleNext,
     variant: variant,
     icon_position: icon_position,
     icon: icon
-  }), children);
+  }), children));
 }
 NextButton._supportsSpacingProps = true;
 export default NextButton;

package/extensions/forms/StepsLayout/NextButton/NextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","NextButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepNext","stepsContext","createElement","_extends","onClick","handleNext","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/NextButton/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport SharedContext from '../../../../shared/Context'\nimport StepsContext from '../StepsContext'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction NextButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'primary',\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = sharedContext?.translation.Forms.stepNext,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <Button\n      {...props}\n      className={classnames('dnb-forms-next-button', className)}\n      onClick={stepsContext?.handleNext}\n      variant={variant}\n      icon_position={icon_position}\n      icon={icon}\n    >\n      {children}\n    </Button>\n  )\n}\n\nNextButton._supportsSpacingProps = true\nexport default NextButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,YAAY,MAAM,iBAAiB;AAO1C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,aAAa,GAAGP,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJK,SAAS;IACTC,OAAO,GAAG,SAAS;IACnBC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGhB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAkB,aAAA,CAACf,MAAM,EAAAgB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAEP,UAAU,CAAC,uBAAuB,EAAEO,SAAS,CAAE;IAC1DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,UAAW;IAClCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CAAC;AAEb;AAEAP,UAAU,CAACgB,qBAAqB,GAAG,IAAI;AACvC,eAAehB,UAAU"}
+{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","Button","SharedContext","StepsContext","ButtonRow","NextButton","props","sharedContext","className","variant","icon_position","icon","children","translation","Forms","stepNext","stepsContext","createElement","_extends","onClick","handleNext","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/StepsLayout/NextButton/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport SharedContext from '../../../../shared/Context'\nimport StepsContext from '../StepsContext'\nimport ButtonRow from '../../Form/ButtonRow'\n\nexport type Props = ComponentProps &\n  ButtonProps & {\n    children?: string\n  }\n\nfunction NextButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    variant = 'primary',\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = sharedContext?.translation.Forms.stepNext,\n  } = props\n  const stepsContext = useContext(StepsContext)\n\n  return (\n    <ButtonRow>\n      <Button\n        {...props}\n        className={classnames('dnb-forms-next-button', className)}\n        onClick={stepsContext?.handleNext}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nNextButton._supportsSpacingProps = true\nexport default NextButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,SAAS,MAAM,sBAAsB;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,aAAa,GAAGR,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAM;IACJM,SAAS;IACTC,OAAO,GAAG,SAAS;IACnBC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC;EAC9C,CAAC,GAAGT,KAAK;EACT,MAAMU,YAAY,GAAGjB,UAAU,CAACI,YAAY,CAAC;EAE7C,OACEL,KAAA,CAAAmB,aAAA,CAACb,SAAS,QACRN,KAAA,CAAAmB,aAAA,CAAChB,MAAM,EAAAiB,QAAA,KACDZ,KAAK;IACTE,SAAS,EAAER,UAAU,CAAC,uBAAuB,EAAEQ,SAAS,CAAE;IAC1DW,OAAO,EAAEH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEI,UAAW;IAClCX,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,IAEVC,QACK,CACC,CAAC;AAEhB;AAEAP,UAAU,CAACgB,qBAAqB,GAAG,IAAI;AACvC,eAAehB,UAAU"}

package/extensions/forms/StepsLayout/PreviousButton/PreviousButton.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { Button } from '../../../../components';
 import SharedContext from '../../../../shared/Context';
 import StepsContext from '../StepsContext';
+import ButtonRow from '../../Form/ButtonRow';
 function PreviousButton(props) {
   const sharedContext = useContext(SharedContext);
   const {
@@ -16,13 +17,13 @@ function PreviousButton(props) {
     children = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stepPrevious
   } = props;
   const stepsContext = useContext(StepsContext);
-  return React.createElement(Button, _extends({}, props, {
+  return React.createElement(ButtonRow, null, React.createElement(Button, _extends({}, props, {
     className: classnames('dnb-forms-previous-button', className),
     onClick: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.handlePrevious,
     variant: variant,
     icon_position: icon_position,
     icon: icon
-  }), children);
+  }), children));
 }
 PreviousButton._supportsSpacingProps = true;
 export default PreviousButton;