@dnb/eufemia 10.37.0 → 10.38.0

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ReturnAdditional } from '../../hooks/useFieldProps';
 import { FieldHelpProps, FieldProps } from '../../types';
 export type Props = FieldHelpProps & FieldProps<Array<string | number> | undefined> & {
     children?: React.ReactNode;
@@ -9,4 +10,17 @@ declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.E
 declare namespace ArraySelection {
     var _supportsSpacingProps: boolean;
 }
+export declare function getCheckboxOrToggleOptions({ id, variant, info, warning, emptyValue, htmlAttributes, children, value, disabled, hasError, handleChange, }: {
+    id: Props['id'];
+    variant?: Props['variant'];
+    info?: Props['info'];
+    warning?: Props['warning'];
+    emptyValue?: Props['emptyValue'];
+    htmlAttributes?: Props['htmlAttributes'];
+    children?: Props['children'];
+    value?: Props['value'];
+    disabled?: Props['disabled'];
+    hasError?: ReturnAdditional<Props['value']>['hasError'];
+    handleChange?: ReturnAdditional<Props['value']>['handleChange'];
+}): any;
 export default ArraySelection;

package/extensions/forms/Field/ArraySelection/ArraySelection.js

@@ -1,13 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["value", "error", "title", "help", "className", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
 import classnames from 'classnames';
 import OptionField from '../Option';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import { getStatus } from '../Selection';
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
 function ArraySelection(props) {
   const {
@@ -26,12 +30,13 @@ function ArraySelection(props) {
     warning,
     disabled,
     emptyValue,
+    htmlAttributes,
     handleChange,
     children
   } = useFieldProps(props);
   const fieldSectionProps = _objectSpread({
     forId: id,
-    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
     contentClassName: 'dnb-forms-field-array-selection__options',
     help,
     info,
@@ -45,18 +50,19 @@ function ArraySelection(props) {
       title: help.title
     }, help.content) : undefined)
   }, pickSpacingProps(props));
-  const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === OptionField).map(option => {
-    var _option$props$title;
-    return {
-      title: (_option$props$title = option.props.title) !== null && _option$props$title !== void 0 ? _option$props$title : option.props.children,
-      value: option.props.value,
-      handleSelect: () => {
-        const selected = option.props.value;
-        const newValue = value !== null && value !== void 0 && value.includes(selected) ? value.filter(value => value !== selected) : [...(value !== null && value !== void 0 ? value : []), selected];
-        handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValue.length === 0 ? emptyValue : newValue);
-      }
-    };
-  }), [children, value, emptyValue, handleChange]);
+  const options = getCheckboxOrToggleOptions({
+    id,
+    variant,
+    info,
+    warning,
+    emptyValue,
+    htmlAttributes,
+    children,
+    value,
+    disabled,
+    handleChange,
+    hasError
+  });
   switch (variant) {
     case 'button':
       return React.createElement(FieldBlock, fieldSectionProps, React.createElement(ToggleButtonGroupContext.Provider, {
@@ -64,24 +70,77 @@ function ArraySelection(props) {
           status: hasError ? 'error' : undefined,
           disabled
         }
-      }, options.map((option, i) => React.createElement(ToggleButton, {
-        key: `option-${i}-${option.value}`,
-        text: option.title,
-        checked: value === null || value === void 0 ? void 0 : value.includes(option.value),
-        on_change: option.handleSelect
-      }))));
+      }, options));
     case 'checkbox':
-      return React.createElement(FieldBlock, fieldSectionProps, options.map((option, i) => React.createElement(Checkbox, {
-        key: `option-${i}-${option.value}`,
-        className: "dnb-forms-field-array-selection__checkbox",
-        label: option.title,
-        checked: value === null || value === void 0 ? void 0 : value.includes(option.value),
-        disabled: disabled,
-        on_change: option.handleSelect,
-        status: hasError ? 'error' : undefined
-      })));
+      return React.createElement(FieldBlock, fieldSectionProps, options);
   }
 }
+export function getCheckboxOrToggleOptions(_ref) {
+  let {
+    id,
+    variant = 'checkbox',
+    info,
+    warning,
+    emptyValue,
+    htmlAttributes,
+    children,
+    value,
+    disabled,
+    hasError,
+    handleChange
+  } = _ref;
+  const optionsCount = React.Children.count(children);
+  const Component = variant === 'checkbox' ? Checkbox : ToggleButton;
+  const createOption = (props, i) => {
+    const {
+        value: selected,
+        error,
+        title,
+        help,
+        className,
+        children
+      } = props,
+      rest = _objectWithoutProperties(props, _excluded);
+    const label = title !== null && title !== void 0 ? title : children;
+    const status = getStatus(error, info, warning);
+    const suffix = help ? React.createElement(HelpButton, {
+      size: "small",
+      title: help.title
+    }, help.content) : undefined;
+    const handleSelect = () => {
+      const newValue = value !== null && value !== void 0 && value.includes(selected) ? value.filter(value => value !== selected) : [...(value !== null && value !== void 0 ? value : []), selected];
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(newValue.length === 0 ? emptyValue : newValue);
+    };
+    return React.createElement(Component, _extends({
+      id: optionsCount === 1 ? id : undefined,
+      key: `option-${i}-${value}`,
+      className: classnames(`dnb-forms-field-array-selection__${variant}`, className),
+      label: variant === 'checkbox' ? label : undefined,
+      text: variant === 'button' ? label : undefined,
+      value: value,
+      disabled: disabled,
+      checked: value === null || value === void 0 ? void 0 : value.includes(selected),
+      status: (hasError || status) && 'error',
+      suffix: suffix,
+      on_change: handleSelect
+    }, htmlAttributes, rest));
+  };
+  const mapOptions = children => {
+    return React.Children.toArray(children).map((child, i) => {
+      if (React.isValidElement(child)) {
+        if (child.type === OptionField) {
+          return createOption(child.props, i);
+        }
+        if (child.props.children) {
+          const nestedChildren = mapOptions(child.props.children);
+          return React.cloneElement(child, child.props, nestedChildren);
+        }
+      }
+      return child;
+    });
+  };
+  return mapOptions(children);
+}
 ArraySelection._supportsSpacingProps = true;
 export default ArraySelection;
 //# sourceMappingURL=ArraySelection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","HelpButton","ToggleButton","classnames","OptionField","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","handleChange","children","fieldSectionProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","handleSelect","selected","newValue","includes","length","Provider","status","i","key","text","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldSectionProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\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            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options.map((option, i) => (\n              <ToggleButton\n                key={`option-${i}-${option.value}`}\n                text={option.title}\n                checked={value?.includes(option.value)}\n                on_change={option.handleSelect}\n              />\n            ))}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n              status={hasError ? 'error' : undefined}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","Checkbox","HelpButton","ToggleButton","classnames","OptionField","FieldBlock","useFieldProps","pickSpacingProps","getStatus","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","fieldSectionProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","getCheckboxOrToggleOptions","Provider","status","_ref","optionsCount","Children","count","Component","createOption","i","selected","rest","_objectWithoutProperties","_excluded","suffix","handleSelect","newValue","includes","filter","length","_extends","key","text","checked","on_change","mapOptions","toArray","map","child","isValidElement","type","nestedChildren","cloneElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldSectionProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${variant}`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = getCheckboxOrToggleOptions({\n    id,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\n  })\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return <FieldBlock {...fieldSectionProps}>{options}</FieldBlock>\n  }\n}\n\nexport function getCheckboxOrToggleOptions({\n  id,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n}: {\n  id: Props['id']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'checkbox' ? Checkbox : ToggleButton\n  ) as typeof Checkbox & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const {\n      value: selected,\n      error,\n      title,\n      help,\n      className,\n      children,\n      ...rest\n    } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n    const handleSelect = () => {\n      const newValue = value?.includes(selected)\n        ? value.filter((value) => value !== selected)\n        : [...(value ?? []), selected]\n\n      handleChange?.(\n        newValue.length === 0 ? (emptyValue as typeof value) : newValue\n      )\n    }\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        className={classnames(\n          `dnb-forms-field-array-selection__${variant}`,\n          className\n        )}\n        label={variant === 'checkbox' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={value}\n        disabled={disabled}\n        checked={value?.includes(selected)}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        on_change={handleSelect}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\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            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

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

@@ -1,20 +1,29 @@
 /*
  * Utilities
  */
+.dnb-forms-field-array-selection {
+  --row-gap: var(--spacing-x-small);
+}
 .dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-x-small);
+  row-gap: var(--row-gap);
+}
+.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--variant-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   row-gap: 0;
 }
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+  line-height: 2.5rem;
+}
 .dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
-  row-gap: var(--spacing-x-small);
+  row-gap: var(--row-gap);
 }
 @media screen and (min-width: 40em) {
   .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {

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

@@ -1 +1 @@
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--spacing-x-small)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}
+.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--row-gap)}@media screen and (min-width:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}

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

@@ -1,20 +1,31 @@
 @import '../../../../../style/core/utilities.scss';
 
 .dnb-forms-field-array-selection {
+  --row-gap: var(--spacing-x-small);
   &--options-layout-vertical &__options {
     display: flex;
     flex-flow: column;
-    row-gap: var(--spacing-x-small);
+    row-gap: var(--row-gap);
   }
-  &--options-layout-vertical#{&}--layout-horizontal &__options {
+  &--options-layout-vertical#{&}--layout-horizontal {
+    .dnb-forms-field-block__label {
+      align-items: flex-start;
+    }
+  }
+  &--variant-checkbox#{&}--layout-horizontal &__options {
     row-gap: 0;
   }
+  &--variant-button#{&}--options-layout-vertical#{&}--layout-horizontal {
+    .dnb-forms-field-block__label {
+      line-height: 2.5rem;
+    }
+  }
 
   &--options-layout-horizontal &__options {
     display: flex;
     flex-flow: row wrap;
     column-gap: var(--spacing-small);
-    row-gap: var(--spacing-x-small); // for when wrapped
+    row-gap: var(--row-gap); // for when wrapped
   }
 
   @include allAbove(small) {

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

@@ -1,14 +1,15 @@
 import React from 'react';
-import { FieldProps, FieldHelpProps, FieldBlockWidth } from '../../types';
+import { ReturnAdditional } from '../../hooks/useFieldProps';
+import { FormError, FieldProps, FieldHelpProps, FieldBlockWidth } from '../../types';
 import type { FormStatusText } from '../../../../components/FormStatus';
 import type { AutocompleteAllProps, AutocompleteProps } from '../../../../components/Autocomplete';
 import type { DropdownAllProps, DropdownProps } from '../../../../components/Dropdown';
 import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
-interface IOption {
+type IOption = {
     title: string | React.ReactNode;
     value: number | string;
     status: FormStatusText;
-}
+};
 export type Data = AutocompleteAllProps['data'] | DropdownAllProps['data'];
 export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
     variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button';
@@ -23,4 +24,15 @@ declare function Selection(props: Props): import("react/jsx-runtime").JSX.Elemen
 declare namespace Selection {
     var _supportsSpacingProps: boolean;
 }
+export declare function getStatus(error: Error | FormError | undefined, info: React.ReactNode, warning: React.ReactNode): string;
+export declare function getRadioOrToggleOptions({ id, value, variant, info, warning, htmlAttributes, children, hasError, }: {
+    id: string;
+    value: Props['value'];
+    variant: Props['variant'];
+    info: Props['info'];
+    warning: Props['warning'];
+    htmlAttributes: Props['htmlAttributes'];
+    children: Props['children'];
+    hasError: ReturnAdditional<Props['value']>['hasError'];
+}): any;
 export default Selection;

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

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["error", "title", "help", "children"],
-  _excluded2 = ["value", "title", "status"];
+const _excluded = ["error", "title", "help", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useCallback } from 'react';
@@ -80,34 +79,10 @@ function Selection(props) {
     label,
     labelDescription
   });
-  const getStatus = useCallback(error => {
-    var _error$message;
-    return (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString());
-  }, [info, warning]);
-  const status = getStatus(error);
   switch (variant) {
     case 'radio':
     case 'button':
       {
-        const options = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === OptionField).map(option => {
-          const _option$props = option.props,
-            {
-              error,
-              title,
-              help,
-              children
-            } = _option$props,
-            rest = _objectWithoutProperties(_option$props, _excluded);
-          const status = getStatus(error);
-          return _objectSpread({
-            title: title !== null && title !== void 0 ? title : children,
-            status,
-            suffix: help ? React.createElement(HelpButton, {
-              size: "small",
-              title: help.title
-            }, help.content) : undefined
-          }, rest);
-        });
         const Component = variant === 'radio' ? Radio : ToggleButton;
         return React.createElement(FieldBlock, fieldSectionProps, React.createElement(Component.Group, {
           className: cn,
@@ -115,26 +90,21 @@ function Selection(props) {
           disabled: disabled,
           on_change: onChangeHandler,
           value: String(value !== null && value !== void 0 ? value : '')
-        }, options.map((option, i) => {
-          const {
-              value,
-              title,
-              status
-            } = option,
-            rest = _objectWithoutProperties(option, _excluded2);
-          return React.createElement(Component, _extends({
-            id: options.length === 1 ? id : undefined,
-            key: `option-${i}-${value}`,
-            label: variant === 'radio' ? title : undefined,
-            text: variant === 'button' ? title : undefined,
-            value: String(value !== null && value !== void 0 ? value : ''),
-            status: (hasError || status) && 'error'
-          }, htmlAttributes, rest));
+        }, getRadioOrToggleOptions({
+          id,
+          value,
+          variant,
+          info,
+          warning,
+          htmlAttributes,
+          children,
+          hasError
         })));
       }
     case 'autocomplete':
     case 'dropdown':
       {
+        const status = getStatus(error, info, warning);
         const sharedProps = _objectSpread(_objectSpread({
           id,
           list_class: 'dnb-forms-field-selection__list',
@@ -159,6 +129,63 @@ function Selection(props) {
       }
   }
 }
+export function getStatus(error, info, warning) {
+  var _error$message;
+  return (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString());
+}
+export function getRadioOrToggleOptions(_ref5) {
+  let {
+    id,
+    value,
+    variant,
+    info,
+    warning,
+    htmlAttributes,
+    children,
+    hasError
+  } = _ref5;
+  const optionsCount = React.Children.count(children);
+  const Component = variant === 'radio' ? Radio : ToggleButton;
+  const createOption = (props, i) => {
+    const {
+        error,
+        title,
+        help,
+        children
+      } = props,
+      rest = _objectWithoutProperties(props, _excluded);
+    const label = title !== null && title !== void 0 ? title : children;
+    const status = getStatus(error, info, warning);
+    const suffix = help ? React.createElement(HelpButton, {
+      size: "small",
+      title: help.title
+    }, help.content) : undefined;
+    return React.createElement(Component, _extends({
+      id: optionsCount === 1 ? id : undefined,
+      key: `option-${i}-${value}`,
+      label: variant === 'radio' ? label : undefined,
+      text: variant === 'button' ? label : undefined,
+      value: String(value !== null && value !== void 0 ? value : ''),
+      status: (hasError || status) && 'error',
+      suffix: suffix
+    }, htmlAttributes, rest));
+  };
+  const mapOptions = children => {
+    return React.Children.toArray(children).map((child, i) => {
+      if (React.isValidElement(child)) {
+        if (child.type === OptionField) {
+          return createOption(child.props, i);
+        }
+        if (child.props.children) {
+          const nestedChildren = mapOptions(child.props.children);
+          return React.cloneElement(child, child.props, nestedChildren);
+        }
+      }
+      return child;
+    });
+  };
+  return mapOptions(children);
+}
 Selection._supportsSpacingProps = true;
 export default Selection;
 //# sourceMappingURL=Selection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldSectionProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","status","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","title","rest","_objectWithoutProperties","_excluded","suffix","createElement","size","content","Component","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","sharedProps","list_class","portal_class","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\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__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\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 status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const options: IOption[] = React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const { error, title, help, children, ...rest } = option.props\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            status,\n            suffix: help ? (\n              <HelpButton size=\"small\" title={help.title}>\n                {help.content}\n              </HelpButton>\n            ) : undefined,\n            ...rest,\n          }\n        })\n\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldSectionProps}>\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={(hasError || status) && 'error'}\n                  {...htmlAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\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: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\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\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldSectionProps","_objectSpread","forId","Component","createElement","Group","layout_direction","on_change","String","getRadioOrToggleOptions","status","getStatus","sharedProps","list_class","portal_class","title","suffix","content","on_show","on_hide","stretch","_extends","_error$message","message","Error","toString","_ref5","optionsCount","Children","count","createOption","i","rest","_objectWithoutProperties","_excluded","size","key","text","mapOptions","toArray","map","child","isValidElement","type","nestedChildren","cloneElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    children: React.ReactNode\n  }>\n>\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\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__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\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      return (\n        <FieldBlock {...fieldSectionProps}>\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            {getRadioOrToggleOptions({\n              id,\n              value,\n              variant,\n              info,\n              warning,\n              htmlAttributes,\n              children,\n              hasError,\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const status = getStatus(error, info, warning)\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: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\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\nexport function getStatus(\n  error: Error | FormError | undefined,\n  info: React.ReactNode,\n  warning: React.ReactNode\n) {\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\nexport function getRadioOrToggleOptions({\n  id,\n  value,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  hasError,\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  hasError: ReturnAdditional<Props['value']>['hasError']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'radio' ? Radio : ToggleButton\n  ) as typeof Radio & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { error, title, help, children, ...rest } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? '')}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\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            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACnD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,YAAY,QAAQ,qCAAqC;AAClE,SACEC,YAAY,EACZC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,YAAY,QACP,wBAAwB;AAC/B,OAAOC,WAAW,IAAIC,WAAW,QAAQ,WAAW;AACpD,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SACEC,SAAS,QAIJ,aAAa;AAWpB,SACEC,qBAAqB,QAEhB,+CAA+C;AA+BtD,SAASC,SAASA,CAACC,KAAY,EAAE;EAC/B,MAAMC,UAAU,GAAGlB,OAAO,CAAC,MAAO,gBAAeG,YAAY,CAAC,CAAE,EAAC,EAAE,EAAE,CAAC;EAEtE,MAAM;IACJgB,EAAE;IACFC,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,KAAK;IACLC,gBAAgB;IAChBC,MAAM,GAAG,UAAU;IACnBC,aAAa,GAAG,UAAU;IAC1BC,WAAW;IACXC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,IAAI;IACJC,UAAU;IACVC,KAAK,GAAG,OAAO;IACfC,cAAc;IACdC,WAAW;IACXC,YAAY;IACZC,QAAQ;IAGRC,IAAI;IACJC,iBAAiB;IACjBC;EACF,CAAC,GAAG/B,aAAa,CAACM,KAAK,CAAC;EAExB,MAAM0B,oBAAoB,GAAG1C,WAAW,CACtC2C,IAAA,IAAc;IAAA,IAAb;MAAEJ;IAAK,CAAC,GAAAI,IAAA;IACP,MAAMC,WAAW,GAAGL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,WAAW;IACrCP,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CACV,CAACO,WAAW,IAAIA,WAAW,KAAK3B,UAAU,GACtCgB,UAAU,GACVW,WACN,CAAC;EACH,CAAC,EACD,CAACP,YAAY,EAAEJ,UAAU,EAAEhB,UAAU,CACvC,CAAC;EAED,MAAM4B,eAAe,GAAG7C,WAAW,CACjC8C,KAAA,IAAe;IAAA,IAAd;MAAEpB;IAAM,CAAC,GAAAoB,KAAA;IACRT,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGX,KAAK,KAAKqB,SAAS,GAAGd,UAAU,GAAGP,KAAK,CAAC;EAC1D,CAAC,EACD,CAACW,YAAY,EAAEJ,UAAU,CAC3B,CAAC;EAKD,MAAMe,UAAU,GAAGhD,WAAW,CAC5BiD,KAAA,IAAc;IAAA,IAAb;MAAEV;IAAK,CAAC,GAAAU,KAAA;IACPb,WAAW,CAAC,IAAI,EAAEG,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,WAAW,CAAC;EACtC,CAAC,EACD,CAACR,WAAW,CACd,CAAC;EAED,MAAMc,UAAU,GAAGlD,WAAW,CAC5BmD,KAAA,IAAc;IAAA,IAAb;MAAEZ;IAAK,CAAC,GAAAY,KAAA;IACPf,WAAW,CAAC,KAAK,EAAEG,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,WAAW,CAAC;EACvC,CAAC,EACD,CAACR,WAAW,CACd,CAAC;EAED,MAAMgB,EAAE,GAAGnD,UAAU,kEAEoBmB,OAAO,+CACAI,aAAc,IAC5DL,SACF,CAAC;EAED,MAAMkC,iBAAiB,GAAAC,aAAA,CAAAA,aAAA;IACrBC,KAAK,EAAErC,EAAE;IACTC,SAAS,EAAEiC;EAAE,GACVzC,gBAAgB,CAACK,KAAK,CAAC;IAC1BW,IAAI;IACJC,OAAO;IACPC,KAAK;IACLN,MAAM;IACNF,KAAK;IACLC;EAAgB,EACjB;EAED,QAAQF,OAAO;IACb,KAAK,OAAO;IACZ,KAAK,QAAQ;MAAE;QACb,MAAMoC,SAAS,GACbpC,OAAO,KAAK,OAAO,GAAGf,KAAK,GAAGF,YACO;QAEvC,OACEL,KAAA,CAAA2D,aAAA,CAAC7C,UAAU,EAAKyC,iBAAiB,EAC/BvD,KAAA,CAAA2D,aAAA,CAACD,SAAS,CAACE,KAAK;UACdvC,SAAS,EAAEiC,EAAG;UACdO,gBAAgB,EACdnC,aAAa,KAAK,YAAY,GAAG,KAAK,GAAG,QAC1C;UACDO,QAAQ,EAAEA,QAAS;UACnB6B,SAAS,EAAEf,eAAgB;UAC3BnB,KAAK,EAAEmC,MAAM,CAACnC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;QAAE,GAE1BoC,uBAAuB,CAAC;UACvB5C,EAAE;UACFQ,KAAK;UACLN,OAAO;UACPO,IAAI;UACJC,OAAO;UACPO,cAAc;UACdG,QAAQ;UACRR;QACF,CAAC,CACc,CACP,CAAC;MAEjB;IAEA,KAAK,cAAc;IACnB,KAAK,UAAU;MAAE;QACf,MAAMiC,MAAM,GAAGC,SAAS,CAACnC,KAAK,EAAEF,IAAI,EAAEC,OAAO,CAAC;QAC9C,MAAMqC,WAAoD,GAAAX,aAAA,CAAAA,aAAA;UACxDpC,EAAE;UACFgD,UAAU,EAAE,iCAAiC;UAC7CC,YAAY,EAAE,mCAAmC;UACjDC,KAAK,EAAE3C,WAAW;UAClBC,KAAK,EAAEmC,MAAM,CAACnC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;UAC1BqC,MAAM,EAAE,CAACjC,QAAQ,IAAIiC,MAAM,KAAK,OAAO;UACvChC;QAAQ,GACLI,cAAc;UACjBI,IAAI,EAAEA,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI9B,WAAW,CAAO6B,QAAQ,CAAC;UACzC+B,MAAM,EAAErC,IAAI,GACVlC,KAAA,CAAA2D,aAAA,CAACnD,UAAU;YAAC8D,KAAK,EAAEpC,IAAI,CAACoC;UAAM,GAAEpC,IAAI,CAACsC,OAAoB,CAAC,GACxDvB,SAAS;UACba,SAAS,EAAElB,oBAAoB;UAC/B6B,OAAO,EAAEvB,UAAU;UACnBwB,OAAO,EAAEtB,UAAU;UACnBuB,OAAO,EAAE;QAAI,EACd;QAED,OACE3E,KAAA,CAAA2D,aAAA,CAAC7C,UAAU,EAAA8D,QAAA,KAAKrB,iBAAiB;UAAEnB,KAAK,EAAEA;QAAM,IAC7Cd,OAAO,KAAK,cAAc,GACzBtB,KAAA,CAAA2D,aAAA,CAAClD,YAAY,EAAAmE,QAAA,KACPT,WAAW,EACVzB,iBAAiB,GACjB1B,qBAAqB,CACpB0B,iBACF,CAAC,GACD,IAAI,CACT,CAAC,GAEF1C,KAAA,CAAA2D,aAAA,CAACrD,QAAQ,EAAAsE,QAAA,KACHT,WAAW,EACVxB,aAAa,GACb3B,qBAAqB,CACpB2B,aACF,CAAC,GACD,IAAI,CACT,CAEO,CAAC;MAEjB;EACF;AACF;AAEA,OAAO,SAASuB,SAASA,CACvBnC,KAAoC,EACpCF,IAAqB,EACrBC,OAAwB,EACxB;EAAA,IAAA+C,cAAA;EACA,QAAAA,cAAA,GACE9C,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE+C,OAAO,cAAAD,cAAA,cAAAA,cAAA,GACZ/C,OAAO,YAAYiD,KAAK,IAAIjD,OAAO,CAACgD,OAAO,IAC1ChD,OAAO,YAAYf,SAAS,IAAIe,OAAO,CAACgD,OAAQ,KACjDhD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEkD,QAAQ,CAAC,CAAC,KAClBnD,IAAI,YAAYkD,KAAK,IAAIlD,IAAI,CAACiD,OAAQ,IACtCjD,IAAI,YAAYd,SAAS,IAAIc,IAAI,CAACiD,OAAQ,KAC3CjD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEmD,QAAQ,CAAC,CAAC;AAEtB;AAEA,OAAO,SAAShB,uBAAuBA,CAAAiB,KAAA,EAkBpC;EAAA,IAlBqC;IACtC7D,EAAE;IACFQ,KAAK;IACLN,OAAO;IACPO,IAAI;IACJC,OAAO;IACPO,cAAc;IACdG,QAAQ;IACRR;EAUF,CAAC,GAAAiD,KAAA;EACC,MAAMC,YAAY,GAAGlF,KAAK,CAACmF,QAAQ,CAACC,KAAK,CAAC5C,QAAQ,CAAC;EAEnD,MAAMkB,SAAS,GACbpC,OAAO,KAAK,OAAO,GAAGf,KAAK,GAAGF,YACO;EAEvC,MAAMgF,YAAY,GAAGA,CAACnE,KAAkB,EAAEoE,CAAS,KAAK;IACtD,MAAM;QAAEvD,KAAK;QAAEuC,KAAK;QAAEpC,IAAI;QAAEM;MAAkB,CAAC,GAAGtB,KAAK;MAAdqE,IAAI,GAAAC,wBAAA,CAAKtE,KAAK,EAAAuE,SAAA;IAEvD,MAAMlE,KAAK,GAAG+C,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI9B,QAAQ;IAC/B,MAAMyB,MAAM,GAAGC,SAAS,CAACnC,KAAK,EAAEF,IAAI,EAAEC,OAAO,CAAC;IAC9C,MAAMyC,MAAM,GAAGrC,IAAI,GACjBlC,KAAA,CAAA2D,aAAA,CAACnD,UAAU;MAACkF,IAAI,EAAC,OAAO;MAACpB,KAAK,EAAEpC,IAAI,CAACoC;IAAM,GACxCpC,IAAI,CAACsC,OACI,CAAC,GACXvB,SAAS;IAEb,OACEjD,KAAA,CAAA2D,aAAA,CAACD,SAAS,EAAAkB,QAAA;MACRxD,EAAE,EAAE8D,YAAY,KAAK,CAAC,GAAG9D,EAAE,GAAG6B,SAAU;MACxC0C,GAAG,EAAG,UAASL,CAAE,IAAG1D,KAAM,EAAE;MAC5BL,KAAK,EAAED,OAAO,KAAK,OAAO,GAAGC,KAAK,GAAG0B,SAAU;MAC/C2C,IAAI,EAAEtE,OAAO,KAAK,QAAQ,GAAGC,KAAK,GAAG0B,SAAU;MAC/CrB,KAAK,EAAEmC,MAAM,CAACnC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAE;MAC3BqC,MAAM,EAAE,CAACjC,QAAQ,IAAIiC,MAAM,KAAK,OAAQ;MACxCM,MAAM,EAAEA;IAAO,GACXlC,cAAc,EACdkD,IAAI,CACT,CAAC;EAEN,CAAC;EAED,MAAMM,UAAU,GAAIrD,QAAyB,IAAK;IAChD,OAAOxC,KAAK,CAACmF,QAAQ,CAACW,OAAO,CAACtD,QAAQ,CAAC,CAACuD,GAAG,CACzC,CAACC,KAAsC,EAAEV,CAAC,KAAK;MAC7C,IAAItF,KAAK,CAACiG,cAAc,CAACD,KAAK,CAAC,EAAE;QAC/B,IAAIA,KAAK,CAACE,IAAI,KAAKxF,WAAW,EAAE;UAC9B,OAAO2E,YAAY,CAACW,KAAK,CAAC9E,KAAK,EAAEoE,CAAC,CAAC;QACrC;QAEA,IAAIU,KAAK,CAAC9E,KAAK,CAACsB,QAAQ,EAAE;UACxB,MAAM2D,cAAc,GAAGN,UAAU,CAACG,KAAK,CAAC9E,KAAK,CAACsB,QAAQ,CAAC;UACvD,OAAOxC,KAAK,CAACoG,YAAY,CAACJ,KAAK,EAAEA,KAAK,CAAC9E,KAAK,EAAEiF,cAAc,CAAC;QAC/D;MACF;MAEA,OAAOH,KAAK;IACd,CACF,CAAC;EACH,CAAC;EAED,OAAOH,UAAU,CAACrD,QAAQ,CAAC;AAC7B;AAEAvB,SAAS,CAACoF,qBAAqB,GAAG,IAAI;AACtC,eAAepF,SAAS"}

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

@@ -6,4 +6,13 @@
 }
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
+}
+.dnb-forms-field-selection .dnb-forms-field-block__contents {
+  display: flex;
+}
+.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container,
+.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,
+.dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
+  width: 100%;
+  flex-grow: 1;
 }

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

@@ -1 +1 @@
-.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}
+.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}.dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}

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

@@ -21,4 +21,20 @@
       }
     }
   }
+
+  // In order to stretch nested Section components
+  // Because __contents is not a flex container by default (and should not be)
+  .dnb-forms-field-block__contents {
+    display: flex;
+  }
+
+  .dnb-radio-group,
+  .dnb-toggle-button-group {
+    // On order to stretch a nested Section component
+    .dnb-height-animation,
+    & > .dnb-flex-container {
+      width: 100%;
+      flex-grow: 1;
+    }
+  }
 }

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

@@ -36,6 +36,8 @@ export type Props = {
     animate?: boolean;
     /** Keep the content in the DOM, even if it's not visible */
     keepInDOM?: boolean;
+    /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */
+    compensateForGap?: HeightAnimationProps['compensateForGap'];
     /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */
     fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes;
     element?: HeightAnimationProps['element'];
@@ -45,7 +47,7 @@ export type Props = {
     /** @deprecated Use `visibleWhen` instead */
     whenValue?: unknown;
 };
-declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, animate, keepInDOM, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, animate, keepInDOM, compensateForGap, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Visibility {
     var _supportsSpacingProps: string;
 }