@dnb/eufemia 10.35.0 → 10.36.0

package/cjs/components/tabs/TabsDocs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabsProperties = exports.TabsEvents = void 0;
+exports.TabsProperties = exports.TabsEvents = exports.TabsDataObject = void 0;
 const TabsProperties = {
   selected_key: {
     doc: 'In case one of the tabs should be opened by a `key`.',
@@ -40,9 +40,9 @@ const TabsProperties = {
     type: 'React.ReactNode',
     status: 'optional'
   },
-  data: {
-    doc: "defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]`",
-    type: ['string', '{title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean}'],
+  '[data](/uilib/components/tabs/properties/#data-object)': {
+    doc: 'defines the data structure to load as an object.',
+    type: 'object',
     status: 'required'
   },
   children: {
@@ -97,6 +97,34 @@ const TabsProperties = {
   }
 };
 exports.TabsProperties = TabsProperties;
+const TabsDataObject = {
+  title: {
+    doc: 'The title of the tab.',
+    type: ['string', 'React.ReactNode'],
+    status: 'required'
+  },
+  key: {
+    doc: 'The unique key of the tab.',
+    type: ['string', 'number'],
+    status: 'required'
+  },
+  content: {
+    doc: 'The content of the tab.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  selected: {
+    doc: 'If set to `true`, the tab will be selected.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  disabled: {
+    doc: 'If set to `true`, the tab will be disabled.',
+    type: 'boolean',
+    status: 'optional'
+  }
+};
+exports.TabsDataObject = TabsDataObject;
 const TabsEvents = {
   on_change: {
     doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',

package/cjs/components/tabs/TabsDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsDocs.js","names":["TabsProperties","selected_key","doc","type","status","align","content_style","content_spacing","tabs_style","tabs_spacing","tab_element","data","children","content","prerender","prevent_rerender","scroll","no_border","nav_button_edge","skeleton","breakout","exports","TabsEvents","on_change","on_click","on_focus","on_mouse_enter"],"sources":["../../../../src/components/tabs/TabsDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TabsProperties: PropertiesTableProps = {\n  selected_key: {\n    doc: 'In case one of the tabs should be opened by a `key`.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  align: {\n    doc: 'To align the tab list on the right side `align=\"right\"`. Defaults to `left`.',\n    type: ['left', 'center', 'right'],\n    status: 'optional',\n  },\n  content_style: {\n    doc: 'To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  content_spacing: {\n    doc: 'To modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `large`.',\n    type: [\n      'boolean',\n      'x-small',\n      'small',\n      'medium',\n      'large',\n      'x-large',\n      'xx-large',\n    ],\n    status: 'optional',\n  },\n  tabs_style: {\n    doc: 'To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  tabs_spacing: {\n    doc: 'To modify the `spacing` inside the tab list. Defaults to `null`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tab_element: {\n    doc: \"Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: ';url';, ... }]}`). Defaults to `<button>`.\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  data: {\n    doc: \"defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]`\",\n    type: [\n      'string',\n      '{title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean}',\n    ],\n    status: 'required',\n  },\n  children: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  content: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  prerender: {\n    doc: 'If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_rerender: {\n    doc: 'If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scroll: {\n    doc: 'If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  no_border: {\n    doc: 'If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nav_button_edge: {\n    doc: 'If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  breakout: {\n    doc: 'If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const TabsEvents: PropertiesTableProps = {\n  on_change: {\n    doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_click: {\n    doc: 'This event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'This event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_mouse_enter: {\n    doc: \"This event gets triggered once the user';s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.\",\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"TabsDocs.js","names":["TabsProperties","selected_key","doc","type","status","align","content_style","content_spacing","tabs_style","tabs_spacing","tab_element","children","content","prerender","prevent_rerender","scroll","no_border","nav_button_edge","skeleton","breakout","exports","TabsDataObject","title","key","selected","disabled","TabsEvents","on_change","on_click","on_focus","on_mouse_enter"],"sources":["../../../../src/components/tabs/TabsDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TabsProperties: PropertiesTableProps = {\n  selected_key: {\n    doc: 'In case one of the tabs should be opened by a `key`.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  align: {\n    doc: 'To align the tab list on the right side `align=\"right\"`. Defaults to `left`.',\n    type: ['left', 'center', 'right'],\n    status: 'optional',\n  },\n  content_style: {\n    doc: 'To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  content_spacing: {\n    doc: 'To modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `large`.',\n    type: [\n      'boolean',\n      'x-small',\n      'small',\n      'medium',\n      'large',\n      'x-large',\n      'xx-large',\n    ],\n    status: 'optional',\n  },\n  tabs_style: {\n    doc: 'To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  tabs_spacing: {\n    doc: 'To modify the `spacing` inside the tab list. Defaults to `null`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tab_element: {\n    doc: \"Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: ';url';, ... }]}`). Defaults to `<button>`.\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  '[data](/uilib/components/tabs/properties/#data-object)': {\n    doc: 'defines the data structure to load as an object.',\n    type: 'object',\n    status: 'required',\n  },\n  children: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  content: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  prerender: {\n    doc: 'If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_rerender: {\n    doc: 'If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scroll: {\n    doc: 'If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  no_border: {\n    doc: 'If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nav_button_edge: {\n    doc: 'If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  breakout: {\n    doc: 'If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const TabsDataObject: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the tab.',\n    type: ['string', 'React.ReactNode'],\n    status: 'required',\n  },\n  key: {\n    doc: 'The unique key of the tab.',\n    type: ['string', 'number'],\n    status: 'required',\n  },\n  content: {\n    doc: 'The content of the tab.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  selected: {\n    doc: 'If set to `true`, the tab will be selected.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'If set to `true`, the tab will be disabled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n\nexport const TabsEvents: PropertiesTableProps = {\n  on_change: {\n    doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_click: {\n    doc: 'This event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'This event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_mouse_enter: {\n    doc: \"This event gets triggered once the user';s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.\",\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

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

@@ -156,7 +156,7 @@ class ToggleButtonGroup extends _react.default.PureComponent {
     }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, null, _react.default.createElement(_Flex.default.Container, {
       align: "baseline",
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
-      spacing: vertical ? 'x-small' : 'small'
+      gap: vertical ? 'x-small' : 'small'
     }, label && _react.default.createElement(_FormLabel.default, {
       element: "legend",
       id: id + '-label',
@@ -176,7 +176,7 @@ class ToggleButtonGroup extends _react.default.PureComponent {
       no_animation: status_no_animation,
       skeleton: skeleton
     }, status_props)), _react.default.createElement("span", {
-      className: "dnb-toggle-button-group__children"
+      className: `dnb-toggle-button-group__shell__children dnb-toggle-button-group__shell__children--${layout_direction}`
     }, children, suffix && _react.default.createElement(_Suffix.default, {
       className: "dnb-toggle-button-group__suffix",
       id: id + '-suffix',

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","spacing","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              spacing={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 className=\"dnb-toggle-button-group__children\">\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","_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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"}

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

@@ -82,8 +82,8 @@
   margin-right: 1rem;
 }
 .dnb-toggle-button-group {
-  --toggle-button-group-margin-right: 1rem;
-  --toggle-button-group-margin-bottom: 1rem;
+  --toggle-button-group-column-gap: 1rem;
+  --toggle-button-group-row-gap: 1rem;
   display: inline-flex;
 }
 .dnb-toggle-button-group fieldset {
@@ -91,10 +91,6 @@
   padding: 0;
   border: none;
 }
-.dnb-toggle-button-group .dnb-toggle-button {
-  margin-right: var(--toggle-button-group-margin-right);
-  margin-bottom: var(--toggle-button-group-margin-bottom);
-}
 .dnb-toggle-button-group--column .dnb-toggle-button {
   display: flex;
   margin-right: 0;
@@ -105,10 +101,23 @@
 .dnb-toggle-button-group__shell {
   display: flex;
   flex-direction: column;
+  row-gap: var(--toggle-button-group-row-gap);
 }
 .dnb-toggle-button-group__shell__children {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  -moz-column-gap: var(--toggle-button-group-column-gap);
+       column-gap: var(--toggle-button-group-column-gap);
+  row-gap: var(--toggle-button-group-row-gap);
   order: 1;
 }
+.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(-0.5rem);

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-margin-right:1rem;--toggle-button-group-margin-bottom:1rem;display:inline-flex}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group .dnb-toggle-button{margin-bottom:var(--toggle-button-group-margin-bottom);margin-right:var(--toggle-button-group-margin-right)}.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}.dnb-toggle-button-group__shell__children{order:1}.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 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)}}

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

@@ -115,21 +115,14 @@
   }
 
   &-group {
-    --toggle-button-group-margin-right: 1rem;
-    --toggle-button-group-margin-bottom: 1rem;
-
+    --toggle-button-group-column-gap: 1rem;
+    --toggle-button-group-row-gap: 1rem;
     display: inline-flex;
 
     fieldset {
       @include fieldsetReset();
     }
 
-    // default spacing
-    .dnb-toggle-button {
-      margin-right: var(--toggle-button-group-margin-right);
-      margin-bottom: var(--toggle-button-group-margin-bottom);
-    }
-
     &--column .dnb-toggle-button {
       display: flex;
       margin-right: 0;
@@ -143,9 +136,23 @@
     &__shell {
       display: flex;
       flex-direction: column;
+      row-gap: var(--toggle-button-group-row-gap);
 
       &__children {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        column-gap: var(--toggle-button-group-column-gap);
+        row-gap: var(--toggle-button-group-row-gap);
+
         order: 1;
+
+        &--row {
+          flex-direction: row;
+        }
+        &--column {
+          flex-direction: column;
+        }
       }
 
       & > .dnb-form-status {

package/cjs/extensions/forms/DataContext/Provider/Provider.js

@@ -69,7 +69,7 @@ function Provider(props) {
   if (nestedContext !== null && nestedContext !== void 0 && nestedContext.hasContext) {
     throw new Error('DataContext (Form.Handler) can not be nested');
   }
-  const translation = (0, _useTranslation.default)().Form;
+  const translation = (0, _useTranslation.default)().Field;
   const ajvRef = (0, _react.useRef)((0, _ajv.makeAjvInstance)(ajvInstance));
   const mountedFieldPathsRef = (0, _react.useRef)([]);
   const hasVisibleErrorRef = (0, _react.useRef)({});