@dnb/eufemia 10.37.0 → 10.38.0

package/cjs/components/toggle-button/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_componentHelper","_SpacingHelper","_AlignmentHelper2","_FormLabel","_FormStatus","_Flex","_Context","_Suffix","_ToggleButtonGroupContext","_filterValidProps","_AlignmentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ToggleButtonGroup","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","values","getValues","JSON","parse","constructor","_ref","event","multiselect","isTrue","includes","splice","setState","dispatchCustomElementEvent","_refInput","createRef","_id","id","makeUniqueId","_name","name","render","_this$context","_this$context2","extendPropsWithContextInClassComponent","defaultProps","context","getTranslation","ToggleButton","pickFormElementProps","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label_direction","label_sr_only","vertical","layout_direction","label","variant","left_component","disabled","skeleton","className","_value","_values","children","on_change","rest","showStatus","getStatusState","classes","classnames","createSpacingClasses","params","combineDescribedBy","combineLabelledBy","validateDOMAttributes","setContext","_tmp","onChange","onChangeHandler","Fieldset","createElement","Provider","Container","align","direction","gap","element","srOnly","role","show","text_id","text","no_animation","exports","Context","title","attributes","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","number","array","spacingPropTypes","_supportsSpacingProps"],"sources":["../../../../src/components/toggle-button/ToggleButtonGroup.js"],"sourcesContent":["/**\n * Web ToggleButtonGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport ToggleButtonGroupContext from './ToggleButtonGroupContext'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nexport default class ToggleButtonGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    title: PropTypes.string,\n    multiselect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    variant: PropTypes.oneOf(['default', 'checkbox', 'radio']),\n    left_component: PropTypes.node,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.number,\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    values: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    title: null,\n    multiselect: null,\n    variant: null,\n    left_component: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    values: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (\n        typeof props.value !== 'undefined' &&\n        props.value !== state.value\n      ) {\n        state.value = props.value\n      }\n      if (\n        typeof props.values !== 'undefined' &&\n        props.values !== state.values\n      ) {\n        state.values = ToggleButtonGroup.getValues(props)\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  static getValues(props) {\n    if (typeof props.values === 'string' && props.values[0] === '[') {\n      return JSON.parse(props.values)\n    }\n    return props.values\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      // do not set the value here, else get true in this check } else if (context.values && Array.isArray(context.values)) {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    const { multiselect } = this.props\n    const values = this.state.values || []\n\n    if (isTrue(multiselect)) {\n      if (!values.includes(value)) {\n        values.push(value)\n      } else {\n        values.splice(values.indexOf(value), 1)\n      }\n    }\n\n    this.setState({\n      value,\n      values,\n      _listenForPropChanges: false,\n    })\n\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      values,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      ToggleButtonGroup.defaultProps,\n      this.context.getTranslation(this.props).ToggleButton,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.ToggleButtonGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label_direction,\n      label_sr_only,\n      vertical,\n      layout_direction,\n      label,\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      className,\n\n      multiselect,\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      values: _values, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value, values } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-toggle-button-group',\n      status && `dnb-toggle-button-group__status--${status_state}`,\n      !label && 'dnb-toggle-button-group--no-label',\n      `dnb-toggle-button-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      values,\n      multiselect: isTrue(multiselect),\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      setContext: (context) => {\n        // also look for a function, where we are able to fill old values\n        // this is used in the \"constructor\" inside the ToggleButton.js component\n        if (typeof context === 'function') {\n          context = context(this._tmp)\n        }\n        this._tmp = { ...this._tmp, ...context }\n        this.setState({\n          ...context,\n          _listenForPropChanges: false,\n        })\n      },\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <ToggleButtonGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset>\n            <Flex.Container\n              align=\"baseline\"\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              gap={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <span\n                id={id}\n                className=\"dnb-toggle-button-group__shell\"\n                role=\"group\"\n                {...params}\n              >\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  text={status}\n                  state={status_state}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n\n                <span\n                  className={classnames(\n                    'dnb-toggle-button-group__shell__children',\n                    `dnb-toggle-button-group__shell__children--${layout_direction}`\n                  )}\n                >\n                  {children}\n\n                  {suffix && (\n                    <Suffix\n                      className=\"dnb-toggle-button-group__suffix\"\n                      id={id + '-suffix'} // used for \"aria-describedby\"\n                      context={props}\n                    >\n                      {suffix}\n                    </Suffix>\n                  )}\n                </span>\n              </span>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </ToggleButtonGroupContext.Provider>\n    )\n  }\n}\n\nToggleButtonGroup._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_componentHelper","_SpacingHelper","_AlignmentHelper2","_FormLabel","_FormStatus","_Flex","_Space","_Context","_Suffix","_ToggleButtonGroupContext","_filterValidProps","_AlignmentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ToggleButtonGroup","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","values","getValues","JSON","parse","constructor","_ref","event","multiselect","isTrue","includes","splice","setState","dispatchCustomElementEvent","_refInput","createRef","_id","id","makeUniqueId","_name","name","render","_this$context","_this$context2","extendPropsWithContextInClassComponent","defaultProps","context","getTranslation","ToggleButton","pickFormElementProps","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label_direction","label_sr_only","vertical","layout_direction","label","variant","left_component","disabled","skeleton","className","_value","_values","children","on_change","rest","showStatus","getStatusState","classes","classnames","createSpacingClasses","params","combineDescribedBy","combineLabelledBy","validateDOMAttributes","setContext","_tmp","onChange","onChangeHandler","Fieldset","createElement","Provider","Container","direction","gap","element","srOnly","role","show","text_id","text","no_animation","exports","Context","title","attributes","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","number","array","spacingPropTypes","_supportsSpacingProps"],"sources":["../../../../src/components/toggle-button/ToggleButtonGroup.js"],"sourcesContent":["/**\n * Web ToggleButtonGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Space from '../Space'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport ToggleButtonGroupContext from './ToggleButtonGroupContext'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nexport default class ToggleButtonGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    title: PropTypes.string,\n    multiselect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    variant: PropTypes.oneOf(['default', 'checkbox', 'radio']),\n    left_component: PropTypes.node,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.number,\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    values: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    title: null,\n    multiselect: null,\n    variant: null,\n    left_component: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    values: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (\n        typeof props.value !== 'undefined' &&\n        props.value !== state.value\n      ) {\n        state.value = props.value\n      }\n      if (\n        typeof props.values !== 'undefined' &&\n        props.values !== state.values\n      ) {\n        state.values = ToggleButtonGroup.getValues(props)\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  static getValues(props) {\n    if (typeof props.values === 'string' && props.values[0] === '[') {\n      return JSON.parse(props.values)\n    }\n    return props.values\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      // do not set the value here, else get true in this check } else if (context.values && Array.isArray(context.values)) {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    const { multiselect } = this.props\n    const values = this.state.values || []\n\n    if (isTrue(multiselect)) {\n      if (!values.includes(value)) {\n        values.push(value)\n      } else {\n        values.splice(values.indexOf(value), 1)\n      }\n    }\n\n    this.setState({\n      value,\n      values,\n      _listenForPropChanges: false,\n    })\n\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      values,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      ToggleButtonGroup.defaultProps,\n      this.context.getTranslation(this.props).ToggleButton,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.ToggleButtonGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label_direction,\n      label_sr_only,\n      vertical,\n      layout_direction,\n      label,\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      className,\n\n      multiselect,\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      values: _values, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value, values } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-toggle-button-group',\n      status && `dnb-toggle-button-group__status--${status_state}`,\n      !label && 'dnb-toggle-button-group--no-label',\n      `dnb-toggle-button-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      values,\n      multiselect: isTrue(multiselect),\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      setContext: (context) => {\n        // also look for a function, where we are able to fill old values\n        // this is used in the \"constructor\" inside the ToggleButton.js component\n        if (typeof context === 'function') {\n          context = context(this._tmp)\n        }\n        this._tmp = { ...this._tmp, ...context }\n        this.setState({\n          ...context,\n          _listenForPropChanges: false,\n        })\n      },\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <ToggleButtonGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset className=\"dnb-toggle-button-group__fieldset\">\n            <Flex.Container\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              gap={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <Space\n                element=\"span\"\n                id={id}\n                className=\"dnb-toggle-button-group__shell\"\n                role=\"group\"\n                {...params}\n              >\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  text={status}\n                  state={status_state}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n\n                <span\n                  className={classnames(\n                    'dnb-toggle-button-group__shell__children',\n                    `dnb-toggle-button-group__shell__children--${layout_direction}`\n                  )}\n                >\n                  {children}\n\n                  {suffix && (\n                    <Suffix\n                      className=\"dnb-toggle-button-group__suffix\"\n                      id={id + '-suffix'} // used for \"aria-describedby\"\n                      context={props}\n                    >\n                      {suffix}\n                    </Suffix>\n                  )}\n                </span>\n              </Space>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </ToggleButtonGroupContext.Provider>\n    )\n  }\n}\n\nToggleButtonGroup._supportsSpacingProps = true\n"],"mappings":"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"}

package/cjs/components/toggle-button/style/dnb-toggle-button.css

@@ -86,6 +86,9 @@
   --toggle-button-group-row-gap: 1rem;
   display: inline-flex;
 }
+.dnb-toggle-button-group, .dnb-toggle-button-group__fieldset, .dnb-toggle-button-group__shell {
+  flex-grow: 1;
+}
 .dnb-toggle-button-group fieldset {
   margin: 0;
   padding: 0;
@@ -122,9 +125,6 @@
   order: 2;
   transform: translateY(-0.5rem);
 }
-.dnb-toggle-button-group .dnb-flex-container {
-  margin-bottom: calc(var(--toggle-button-group-margin-bottom) * -1);
-}
 .dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label {
   margin-top: 0.5rem;
   align-self: flex-start;

package/cjs/components/toggle-button/style/dnb-toggle-button.min.css

@@ -1 +1 @@
-.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-column-gap:1rem;--toggle-button-group-row-gap:1rem;display:inline-flex}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children{align-items:flex-start;-moz-column-gap:var(--toggle-button-group-column-gap);column-gap:var(--toggle-button-group-column-gap);display:flex;flex-wrap:wrap;order:1;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children--row{flex-direction:row}.dnb-toggle-button-group__shell__children--column{flex-direction:column}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container{margin-bottom:calc(var(--toggle-button-group-margin-bottom)*-1)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}
+.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-column-gap:1rem;--toggle-button-group-row-gap:1rem;display:inline-flex}.dnb-toggle-button-group,.dnb-toggle-button-group__fieldset,.dnb-toggle-button-group__shell{flex-grow:1}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children{align-items:flex-start;-moz-column-gap:var(--toggle-button-group-column-gap);column-gap:var(--toggle-button-group-column-gap);display:flex;flex-wrap:wrap;order:1;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children--row{flex-direction:row}.dnb-toggle-button-group__shell__children--column{flex-direction:column}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}

package/cjs/components/toggle-button/style/dnb-toggle-button.scss

@@ -119,6 +119,12 @@
     --toggle-button-group-row-gap: 1rem;
     display: inline-flex;
 
+    &,
+    &__fieldset,
+    &__shell {
+      flex-grow: 1;
+    }
+
     fieldset {
       @include fieldsetReset();
     }
@@ -162,8 +168,6 @@
     }
 
     .dnb-flex-container {
-      margin-bottom: calc(var(--toggle-button-group-margin-bottom) * -1);
-
       &--direction-horizontal .dnb-form-label {
         margin-top: 0.5rem;
         align-self: flex-start;

package/cjs/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/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js

@@ -4,17 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports.getCheckboxOrToggleOptions = getCheckboxOrToggleOptions;
+var _react = _interopRequireDefault(require("react"));
 var _components = require("../../../../components");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Option = _interopRequireDefault(require("../Option"));
 var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
 var _hooks = require("../../hooks");
 var _utils = require("../../../../components/flex/utils");
+var _Selection = require("../Selection");
 var _ToggleButtonGroupContext = _interopRequireDefault(require("../../../../components/toggle-button/ToggleButtonGroupContext"));
+const _excluded = ["value", "error", "title", "help", "className", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -37,12 +41,13 @@ function ArraySelection(props) {
     warning,
     disabled,
     emptyValue,
+    htmlAttributes,
     handleChange,
     children
   } = (0, _hooks.useFieldProps)(props);
   const fieldSectionProps = _objectSpread({
     forId: id,
-    className: (0, _classnames.default)(`dnb-forms-field-array-selection dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    className: (0, _classnames.default)(`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,
@@ -56,18 +61,19 @@ function ArraySelection(props) {
       title: help.title
     }, help.content) : undefined)
   }, (0, _utils.pickSpacingProps)(props));
-  const options = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(child => _react.default.isValidElement(child) && child.type === _Option.default).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.default.createElement(_FieldBlock.default, fieldSectionProps, _react.default.createElement(_ToggleButtonGroupContext.default.Provider, {
@@ -75,24 +81,77 @@ function ArraySelection(props) {
           status: hasError ? 'error' : undefined,
           disabled
         }
-      }, options.map((option, i) => _react.default.createElement(_components.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.default.createElement(_FieldBlock.default, fieldSectionProps, options.map((option, i) => _react.default.createElement(_components.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.default.createElement(_FieldBlock.default, fieldSectionProps, options);
   }
 }
+function getCheckboxOrToggleOptions(_ref) {
+  let {
+    id,
+    variant = 'checkbox',
+    info,
+    warning,
+    emptyValue,
+    htmlAttributes,
+    children,
+    value,
+    disabled,
+    hasError,
+    handleChange
+  } = _ref;
+  const optionsCount = _react.default.Children.count(children);
+  const Component = variant === 'checkbox' ? _components.Checkbox : _components.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 = (0, _Selection.getStatus)(error, info, warning);
+    const suffix = help ? _react.default.createElement(_components.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.default.createElement(Component, _extends({
+      id: optionsCount === 1 ? id : undefined,
+      key: `option-${i}-${value}`,
+      className: (0, _classnames.default)(`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.default.Children.toArray(children).map((child, i) => {
+      if (_react.default.isValidElement(child)) {
+        if (child.type === _Option.default) {
+          return createOption(child.props, i);
+        }
+        if (child.props.children) {
+          const nestedChildren = mapOptions(child.props.children);
+          return _react.default.cloneElement(child, child.props, nestedChildren);
+        }
+      }
+      return child;
+    });
+  };
+  return mapOptions(children);
+}
 ArraySelection._supportsSpacingProps = true;
 var _default = ArraySelection;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["_react","_interopRequireWildcard","require","_components","_classnames","_interopRequireDefault","_Option","_FieldBlock","_hooks","_utils","_ToggleButtonGroupContext","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","error","hasError","help","info","warning","disabled","emptyValue","handleChange","children","useFieldProps","fieldSectionProps","forId","classnames","contentClassName","createElement","Fragment","HelpButton","size","left","title","content","pickSpacingProps","options","useMemo","React","Children","toArray","child","isValidElement","type","OptionField","map","option","_option$props$title","handleSelect","selected","newValue","includes","Provider","status","ToggleButton","text","checked","on_change","Checkbox","_supportsSpacingProps","_default","exports"],"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","_interopRequireDefault","require","_components","_classnames","_Option","_FieldBlock","_hooks","_utils","_Selection","_ToggleButtonGroupContext","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","useFieldProps","fieldSectionProps","forId","classnames","contentClassName","createElement","Fragment","HelpButton","size","left","title","content","pickSpacingProps","options","getCheckboxOrToggleOptions","Provider","status","_ref","optionsCount","React","Children","count","Component","Checkbox","ToggleButton","createOption","selected","rest","getStatus","suffix","handleSelect","newValue","includes","text","checked","on_change","mapOptions","toArray","map","child","isValidElement","type","OptionField","nestedChildren","cloneElement","_supportsSpacingProps","_default","exports"],"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/cjs/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/cjs/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/cjs/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/cjs/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;