@dnb/eufemia 10.37.0 → 10.39.0

package/es/components/table/table-navigation/TableNavigationHead.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TableTrProps } from '../TableTr';
+export type TableNavigationHeadProps = TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>;
+export declare function TableNavigationHead(allProps: TableNavigationHeadProps): import("react/jsx-runtime").JSX.Element;

package/es/components/table/table-navigation/TableNavigationHead.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _Td;
+const _excluded = ["children", "onClick"];
+import React from 'react';
+import Td from '../TableTd';
+import { TableContext } from '../TableContext';
+import { TableClickableButtonTd, TableClickableHead, TableIconSrTh, isTableHead, onClickTr } from '../TableClickableHead';
+export function TableNavigationHead(allProps) {
+  var _React$useContext;
+  const {
+      children,
+      onClick
+    } = allProps,
+    props = _objectWithoutProperties(allProps, _excluded);
+  const tableContext = React.useContext(TableContext);
+  let content = React.Children.toArray(children);
+  const hasOnClick = typeof onClick === 'function';
+  const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  if (hasOnClick) {
+    content.push(React.createElement(TableClickableButtonTd, {
+      key: "td-icon",
+      ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.navigationButtonSR,
+      icon: "chevron_right",
+      onClick: onClickHandler
+    }));
+  } else if (isTableHead(content)) {
+    var _tableContext$allProp;
+    content.push(React.createElement(TableIconSrTh, {
+      key: "th-icon",
+      text: tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.navigationButtonSR
+    }));
+  } else if (!hasOnClick) {
+    content.push(_Td || (_Td = React.createElement(Td, {
+      key: "empty-td"
+    })));
+  }
+  return React.createElement(TableClickableHead, _extends({
+    clickable: hasOnClick,
+    onClick: onClickHandler,
+    onKeyDown: onClick,
+    ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.navigationButtonSR
+  }, props), content);
+  function onClickHandler(event, allowInteractiveElement) {
+    onClickTr(event, allowInteractiveElement, onClick);
+  }
+}
+//# sourceMappingURL=TableNavigationHead.js.map

package/es/components/table/table-navigation/TableNavigationHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableNavigationHead.js","names":["React","Td","TableContext","TableClickableButtonTd","TableClickableHead","TableIconSrTh","isTableHead","onClickTr","TableNavigationHead","allProps","_React$useContext","children","onClick","props","_objectWithoutProperties","_excluded","tableContext","useContext","content","Children","toArray","hasOnClick","tableContextAllProps","push","createElement","key","ariaLabel","navigationButtonSR","icon","onClickHandler","_tableContext$allProp","text","_Td","_extends","clickable","onKeyDown","event","allowInteractiveElement"],"sources":["../../../../../src/components/table/table-navigation/TableNavigationHead.tsx"],"sourcesContent":["import React from 'react'\nimport Td from '../TableTd'\nimport { TableContext } from '../TableContext'\nimport {\n  TableClickableButtonTd,\n  TableClickableHead,\n  TableIconSrTh,\n  isTableHead,\n  onClickTr,\n} from '../TableClickableHead'\n\nimport type { TableTrProps } from '../TableTr'\n\nexport type TableNavigationHeadProps = TableTrProps &\n  React.TableHTMLAttributes<HTMLTableRowElement>\n\nexport function TableNavigationHead(allProps: TableNavigationHeadProps) {\n  const { children, onClick, ...props } = allProps\n  const tableContext = React.useContext(TableContext)\n\n  let content = React.Children.toArray(children)\n\n  const hasOnClick = typeof onClick === 'function'\n\n  const tableContextAllProps = React.useContext(TableContext)?.allProps\n\n  if (hasOnClick) {\n    content.push(\n      <TableClickableButtonTd\n        key=\"td-icon\"\n        ariaLabel={tableContextAllProps?.navigationButtonSR}\n        icon=\"chevron_right\"\n        onClick={onClickHandler}\n      />\n    )\n  } else if (isTableHead(content)) {\n    content.push(\n      <TableIconSrTh\n        key=\"th-icon\"\n        text={tableContext?.allProps?.navigationButtonSR}\n      />\n    )\n  } else if (!hasOnClick) {\n    content.push(<Td key=\"empty-td\"></Td>)\n  }\n\n  return (\n    <TableClickableHead\n      clickable={hasOnClick}\n      onClick={onClickHandler}\n      onKeyDown={onClick}\n      ariaLabel={tableContextAllProps?.navigationButtonSR}\n      {...props}\n    >\n      {content}\n    </TableClickableHead>\n  )\n\n  function onClickHandler(\n    event: React.SyntheticEvent,\n    allowInteractiveElement?: boolean\n  ) {\n    onClickTr(event, allowInteractiveElement, onClick)\n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,EAAE,MAAM,YAAY;AAC3B,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SACEC,sBAAsB,EACtBC,kBAAkB,EAClBC,aAAa,EACbC,WAAW,EACXC,SAAS,QACJ,uBAAuB;AAO9B,OAAO,SAASC,mBAAmBA,CAACC,QAAkC,EAAE;EAAA,IAAAC,iBAAA;EACtE,MAAM;MAAEC,QAAQ;MAAEC;IAAkB,CAAC,GAAGH,QAAQ;IAAlBI,KAAK,GAAAC,wBAAA,CAAKL,QAAQ,EAAAM,SAAA;EAChD,MAAMC,YAAY,GAAGhB,KAAK,CAACiB,UAAU,CAACf,YAAY,CAAC;EAEnD,IAAIgB,OAAO,GAAGlB,KAAK,CAACmB,QAAQ,CAACC,OAAO,CAACT,QAAQ,CAAC;EAE9C,MAAMU,UAAU,GAAG,OAAOT,OAAO,KAAK,UAAU;EAEhD,MAAMU,oBAAoB,IAAAZ,iBAAA,GAAGV,KAAK,CAACiB,UAAU,CAACf,YAAY,CAAC,cAAAQ,iBAAA,uBAA9BA,iBAAA,CAAgCD,QAAQ;EAErE,IAAIY,UAAU,EAAE;IACdH,OAAO,CAACK,IAAI,CACVvB,KAAA,CAAAwB,aAAA,CAACrB,sBAAsB;MACrBsB,GAAG,EAAC,SAAS;MACbC,SAAS,EAAEJ,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAEK,kBAAmB;MACpDC,IAAI,EAAC,eAAe;MACpBhB,OAAO,EAAEiB;IAAe,CACzB,CACH,CAAC;EACH,CAAC,MAAM,IAAIvB,WAAW,CAACY,OAAO,CAAC,EAAE;IAAA,IAAAY,qBAAA;IAC/BZ,OAAO,CAACK,IAAI,CACVvB,KAAA,CAAAwB,aAAA,CAACnB,aAAa;MACZoB,GAAG,EAAC,SAAS;MACbM,IAAI,EAAEf,YAAY,aAAZA,YAAY,wBAAAc,qBAAA,GAAZd,YAAY,CAAEP,QAAQ,cAAAqB,qBAAA,uBAAtBA,qBAAA,CAAwBH;IAAmB,CAClD,CACH,CAAC;EACH,CAAC,MAAM,IAAI,CAACN,UAAU,EAAE;IACtBH,OAAO,CAACK,IAAI,CAAAS,GAAA,KAAAA,GAAA,GAAChC,KAAA,CAAAwB,aAAA,CAACvB,EAAE;MAACwB,GAAG,EAAC;IAAU,CAAK,CAAC,EAAC;EACxC;EAEA,OACEzB,KAAA,CAAAwB,aAAA,CAACpB,kBAAkB,EAAA6B,QAAA;IACjBC,SAAS,EAAEb,UAAW;IACtBT,OAAO,EAAEiB,cAAe;IACxBM,SAAS,EAAEvB,OAAQ;IACnBc,SAAS,EAAEJ,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,CAAEK;EAAmB,GAChDd,KAAK,GAERK,OACiB,CAAC;EAGvB,SAASW,cAAcA,CACrBO,KAA2B,EAC3BC,uBAAiC,EACjC;IACA9B,SAAS,CAAC6B,KAAK,EAAEC,uBAAuB,EAAEzB,OAAO,CAAC;EACpD;AACF"}

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

@@ -16,6 +16,7 @@ import AlignmentHelper from '../../shared/AlignmentHelper';
 import FormLabel from '../FormLabel';
 import FormStatus from '../FormStatus';
 import Flex from '../Flex';
+import Space from '../Space';
 import Context from '../../shared/Context';
 import Suffix from '../../shared/helpers/Suffix';
 import ToggleButtonGroupContext from './ToggleButtonGroupContext';
@@ -143,15 +144,17 @@ export default class ToggleButtonGroup extends React.PureComponent {
       value: context
     }, React.createElement("div", {
       className: classes
-    }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Fieldset, null, React.createElement(Flex.Container, {
-      align: "baseline",
+    }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Fieldset, {
+      className: "dnb-toggle-button-group__fieldset"
+    }, React.createElement(Flex.Container, {
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
       gap: vertical ? 'x-small' : 'small'
     }, label && React.createElement(FormLabel, {
       element: "legend",
       id: id + '-label',
       srOnly: label_sr_only
-    }, label), React.createElement("span", _extends({
+    }, label), React.createElement(Space, _extends({
+      element: "span",
       id: id,
       className: "dnb-toggle-button-group__shell",
       role: "group"

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","names":["React","PropTypes","classnames","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","AlignmentHelper","FormLabel","FormStatus","Flex","Context","Suffix","ToggleButtonGroupContext","pickFormElementProps","ToggleButtonGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","values","getValues","JSON","parse","constructor","_defineProperty","event","multiselect","includes","push","splice","indexOf","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","getTranslation","ToggleButton","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","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","setContext","_tmp","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","align","direction","gap","element","srOnly","_extends","role","show","text_id","text","no_animation","title","undefined","attributes","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","number","array","_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","PropTypes","classnames","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","AlignmentHelper","FormLabel","FormStatus","Flex","Space","Context","Suffix","ToggleButtonGroupContext","pickFormElementProps","ToggleButtonGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","values","getValues","JSON","parse","constructor","_defineProperty","event","multiselect","includes","push","splice","indexOf","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","getTranslation","ToggleButton","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","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","setContext","_tmp","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","direction","gap","element","srOnly","_extends","role","show","text_id","text","no_animation","title","undefined","attributes","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","number","array","_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":";;;;;;;;;AAOA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,MAAM,EACNC,YAAY,EACZC,sCAAsC,EACtCC,qBAAqB,EACrBC,cAAc,EACdC,kBAAkB,EAClBC,iBAAiB,EACjBC,0BAA0B,QACrB,+BAA+B;AACtC,SACEC,gBAAgB,EAChBC,oBAAoB,QACf,wBAAwB;AAC/B,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,MAAM,MAAM,6BAA6B;AAChD,OAAOC,wBAAwB,MAAM,4BAA4B;AACjE,SAASC,oBAAoB,QAAQ,uCAAuC;AAE5E,eAAe,MAAMC,iBAAiB,SAAStB,KAAK,CAACuB,aAAa,CAAC;EA6FjE,OAAOC,wBAAwBA,CAACC,KAAK,EAAEC,KAAK,EAAE;IAC5C,IAAIA,KAAK,CAACC,qBAAqB,EAAE;MAC/B,IACE,OAAOF,KAAK,CAACG,KAAK,KAAK,WAAW,IAClCH,KAAK,CAACG,KAAK,KAAKF,KAAK,CAACE,KAAK,EAC3B;QACAF,KAAK,CAACE,KAAK,GAAGH,KAAK,CAACG,KAAK;MAC3B;MACA,IACE,OAAOH,KAAK,CAACI,MAAM,KAAK,WAAW,IACnCJ,KAAK,CAACI,MAAM,KAAKH,KAAK,CAACG,MAAM,EAC7B;QACAH,KAAK,CAACG,MAAM,GAAGP,iBAAiB,CAACQ,SAAS,CAACL,KAAK,CAAC;MACnD;IACF;IACAC,KAAK,CAACC,qBAAqB,GAAG,IAAI;IAElC,OAAOD,KAAK;EACd;EAEA,OAAOI,SAASA,CAACL,KAAK,EAAE;IACtB,IAAI,OAAOA,KAAK,CAACI,MAAM,KAAK,QAAQ,IAAIJ,KAAK,CAACI,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;MAC/D,OAAOE,IAAI,CAACC,KAAK,CAACP,KAAK,CAACI,MAAM,CAAC;IACjC;IACA,OAAOJ,KAAK,CAACI,MAAM;EACrB;EAEAI,WAAWA,CAACR,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAAS,eAAA,0BAUI,CAAC;MAAEN,KAAK;MAAEO;IAAM,CAAC,KAAK;MACtC,MAAM;QAAEC;MAAY,CAAC,GAAG,IAAI,CAACX,KAAK;MAClC,MAAMI,MAAM,GAAG,IAAI,CAACH,KAAK,CAACG,MAAM,IAAI,EAAE;MAEtC,IAAI1B,MAAM,CAACiC,WAAW,CAAC,EAAE;QACvB,IAAI,CAACP,MAAM,CAACQ,QAAQ,CAACT,KAAK,CAAC,EAAE;UAC3BC,MAAM,CAACS,IAAI,CAACV,KAAK,CAAC;QACpB,CAAC,MAAM;UACLC,MAAM,CAACU,MAAM,CAACV,MAAM,CAACW,OAAO,CAACZ,KAAK,CAAC,EAAE,CAAC,CAAC;QACzC;MACF;MAEA,IAAI,CAACa,QAAQ,CAAC;QACZb,KAAK;QACLC,MAAM;QACNF,qBAAqB,EAAE;MACzB,CAAC,CAAC;MAEFjB,0BAA0B,CAAC,IAAI,EAAE,WAAW,EAAE;QAC5CkB,KAAK;QACLC,MAAM;QACNM;MACF,CAAC,CAAC;IACJ,CAAC;IAhCC,IAAI,CAACO,SAAS,GAAG1C,KAAK,CAAC2C,SAAS,CAAC,CAAC;IAClC,IAAI,CAACC,GAAG,GAAGnB,KAAK,CAACoB,EAAE,IAAIzC,YAAY,CAAC,CAAC;IACrC,IAAI,CAAC0C,KAAK,GAAGrB,KAAK,CAACsB,IAAI,IAAI3C,YAAY,CAAC,CAAC;IACzC,IAAI,CAACsB,KAAK,GAAG;MAEXC,qBAAqB,EAAE;IACzB,CAAC;EACH;EA2BAqB,MAAMA,CAAA,EAAG;IAAA,IAAAC,aAAA,EAAAC,cAAA;IAEP,MAAMzB,KAAK,GAAGpB,sCAAsC,CAClD,IAAI,CAACoB,KAAK,EACVH,iBAAiB,CAAC6B,YAAY,EAC9B,IAAI,CAACC,OAAO,CAACC,cAAc,CAAC,IAAI,CAAC5B,KAAK,CAAC,CAAC6B,YAAY,EAEpDjC,oBAAoB,EAAA4B,aAAA,GAAC,IAAI,CAACG,OAAO,cAAAH,aAAA,uBAAZA,aAAA,CAAcM,OAAO,CAAC,EAC3ClC,oBAAoB,EAAA6B,cAAA,GAAC,IAAI,CAACE,OAAO,cAAAF,cAAA,uBAAZA,cAAA,CAAcM,WAAW,CAAC,EAC/C,IAAI,CAACJ,OAAO,CAAC9B,iBACf,CAAC;IAED,MAAM;QACJmC,MAAM;QACNC,YAAY;QACZC,YAAY;QACZC,mBAAmB;QACnBC,YAAY;QACZC,MAAM;QACNC,eAAe;QACfC,aAAa;QACbC,QAAQ;QACRC,gBAAgB;QAChBC,KAAK;QACLC,OAAO;QACPC,cAAc;QACdC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QAETpC,WAAW;QACXS,EAAE,EAAED,GAAG;QACPG,IAAI,EAAED,KAAK;QACXlB,KAAK,EAAE6C,MAAM;QACb5C,MAAM,EAAE6C,OAAO;QACfC,QAAQ;QACRC;MAGF,CAAC,GAAGnD,KAAK;MADJoD,IAAI,GAAAC,wBAAA,CACLrD,KAAK,EAAAsD,SAAA;IAET,MAAM;MAAEnD,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACH,KAAK;IAEpC,MAAMmB,EAAE,GAAG,IAAI,CAACD,GAAG;IACnB,MAAMoC,UAAU,GAAGzE,cAAc,CAACkD,MAAM,CAAC;IAEzC,MAAMwB,OAAO,GAAG/E,UAAU,qDAIIgE,gBAAgB,uBAE5CtD,oBAAoB,CAACa,KAAK,CAAC,EAC3B+C,SAAS,EALTf,MAAM,IAAK,oCAAmCC,YAAa,EAAC,EAC5D,CAACS,KAAK,IAAI,mCAKZ,CAAC;IAED,MAAMe,MAAM,GAAAC,aAAA,KACPN,IAAI,CACR;IAED,IAAIG,UAAU,IAAIlB,MAAM,EAAE;MACxBoB,MAAM,CAAC,kBAAkB,CAAC,GAAG1E,kBAAkB,CAC7C0E,MAAM,EACNF,UAAU,GAAGnC,EAAE,GAAG,SAAS,GAAG,IAAI,EAClCiB,MAAM,GAAGjB,EAAE,GAAG,SAAS,GAAG,IAC5B,CAAC;IACH;IACA,IAAIsB,KAAK,EAAE;MACTe,MAAM,CAAC,iBAAiB,CAAC,GAAGzE,iBAAiB,CAACyE,MAAM,EAAErC,EAAE,GAAG,QAAQ,CAAC;IACtE;IAGAvC,qBAAqB,CAAC,IAAI,CAACmB,KAAK,EAAEyD,MAAM,CAAC;IAEzC,MAAM9B,OAAO,GAAG;MACdL,IAAI,EAAE,IAAI,CAACD,KAAK;MAChBlB,KAAK;MACLC,MAAM;MACNO,WAAW,EAAEjC,MAAM,CAACiC,WAAW,CAAC;MAChCgC,OAAO;MACPC,cAAc;MACdC,QAAQ;MACRC,QAAQ;MACRa,UAAU,EAAGhC,OAAO,IAAK;QAGvB,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;UACjCA,OAAO,GAAGA,OAAO,CAAC,IAAI,CAACiC,IAAI,CAAC;QAC9B;QACA,IAAI,CAACA,IAAI,GAAAF,aAAA,CAAAA,aAAA,KAAQ,IAAI,CAACE,IAAI,GAAKjC,OAAO,CAAE;QACxC,IAAI,CAACX,QAAQ,CAAA0C,aAAA,CAAAA,aAAA,KACR/B,OAAO;UACVzB,qBAAqB,EAAE;QAAK,EAC7B,CAAC;MACJ,CAAC;MACD2D,QAAQ,EAAE,IAAI,CAACC;IACjB,CAAC;IAED,MAAMC,QAAQ,GAAGrB,KAAK,GAAG,UAAU,GAAG,KAAK;IAE3C,OACEnE,KAAA,CAAAyF,aAAA,CAACrE,wBAAwB,CAACsE,QAAQ;MAAC9D,KAAK,EAAEwB;IAAQ,GAChDpD,KAAA,CAAAyF,aAAA;MAAKjB,SAAS,EAAES;IAAQ,GAAAU,gBAAA,KAAAA,gBAAA,GACtB3F,KAAA,CAAAyF,aAAA,CAAC5E,eAAe,MAAE,CAAC,GACnBb,KAAA,CAAAyF,aAAA,CAACD,QAAQ;MAAChB,SAAS,EAAC;IAAmC,GACrDxE,KAAA,CAAAyF,aAAA,CAACzE,IAAI,CAAC4E,SAAS;MACbC,SAAS,EACP5B,QAAQ,IAAIF,eAAe,KAAK,UAAU,GACtC,UAAU,GACV,YACL;MACD+B,GAAG,EAAE7B,QAAQ,GAAG,SAAS,GAAG;IAAQ,GAEnCE,KAAK,IACJnE,KAAA,CAAAyF,aAAA,CAAC3E,SAAS;MACRiF,OAAO,EAAC,QAAQ;MAChBlD,EAAE,EAAEA,EAAE,GAAG,QAAS;MAClBmD,MAAM,EAAEhC;IAAc,GAErBG,KACQ,CACZ,EAEDnE,KAAA,CAAAyF,aAAA,CAACxE,KAAK,EAAAgF,QAAA;MACJF,OAAO,EAAC,MAAM;MACdlD,EAAE,EAAEA,EAAG;MACP2B,SAAS,EAAC,gCAAgC;MAC1C0B,IAAI,EAAC;IAAO,GACRhB,MAAM,GAEVlF,KAAA,CAAAyF,aAAA,CAAC1E,UAAU,EAAAkF,QAAA;MACTE,IAAI,EAAEnB,UAAW;MACjBnC,EAAE,EAAEA,EAAE,GAAG,cAAe;MACxBgB,YAAY,EAAEA,YAAa;MAC3BM,KAAK,EAAEA,KAAM;MACbiC,OAAO,EAAEvD,EAAE,GAAG,SAAU;MACxBwD,IAAI,EAAE5C,MAAO;MACb/B,KAAK,EAAEgC,YAAa;MACpB4C,YAAY,EAAE1C,mBAAoB;MAClCW,QAAQ,EAAEA;IAAS,GACfZ,YAAY,CACjB,CAAC,EAEF3D,KAAA,CAAAyF,aAAA;MACEjB,SAAS,wFAEsCN,gBAAiB;IAC9D,GAEDS,QAAQ,EAERb,MAAM,IACL9D,KAAA,CAAAyF,aAAA,CAACtE,MAAM;MACLqD,SAAS,EAAC,iCAAiC;MAC3C3B,EAAE,EAAEA,EAAE,GAAG,SAAU;MACnBO,OAAO,EAAE3B;IAAM,GAEdqC,MACK,CAEN,CACD,CACO,CACR,CACP,CAC4B,CAAC;EAExC;AACF;AAAC5B,eAAA,CApUoBZ,iBAAiB,iBACfJ,OAAO;AAAAgB,eAAA,CADTZ,iBAAiB,kBA+Dd;EACpB6C,KAAK,EAAE,IAAI;EACXJ,eAAe,EAAE,IAAI;EACrBC,aAAa,EAAE,IAAI;EACnBuC,KAAK,EAAE,IAAI;EACXnE,WAAW,EAAE,IAAI;EACjBgC,OAAO,EAAE,IAAI;EACbC,cAAc,EAAE,IAAI;EACpBC,QAAQ,EAAE,IAAI;EACdC,QAAQ,EAAE,IAAI;EACd1B,EAAE,EAAE,IAAI;EACRE,IAAI,EAAE,IAAI;EACVU,MAAM,EAAE,IAAI;EACZC,YAAY,EAAE,OAAO;EACrBC,YAAY,EAAE,IAAI;EAClBC,mBAAmB,EAAE,IAAI;EACzBC,YAAY,EAAE,IAAI;EAClBC,MAAM,EAAE,IAAI;EACZG,QAAQ,EAAE,IAAI;EACdC,gBAAgB,EAAE,KAAK;EACvBtC,KAAK,EAAE4E,SAAS;EAChB3E,MAAM,EAAE2E,SAAS;EACjBC,UAAU,EAAE,IAAI;EAEhBjC,SAAS,EAAE,IAAI;EACfG,QAAQ,EAAE,IAAI;EAEdC,SAAS,EAAE;AACb,CAAC;AAAA8B,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBA3FkBtF,iBAAiB,CAG7BuF,SAAS,GAAA1B,aAAA,CAAAA,aAAA;EACdhB,KAAK,EAAElE,SAAS,CAAC6G,SAAS,CAAC,CACzB7G,SAAS,CAAC8G,MAAM,EAChB9G,SAAS,CAAC+G,IAAI,EACd/G,SAAS,CAACgH,IAAI,CACf,CAAC;EACFlD,eAAe,EAAE9D,SAAS,CAACiH,KAAK,CAAC,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;EAC5DlD,aAAa,EAAE/D,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACkH,IAAI,CAAC,CAAC;EACtEZ,KAAK,EAAEtG,SAAS,CAAC8G,MAAM;EACvB3E,WAAW,EAAEnC,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACkH,IAAI,CAAC,CAAC;EACpE/C,OAAO,EAAEnE,SAAS,CAACiH,KAAK,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;EAC1D7C,cAAc,EAAEpE,SAAS,CAACgH,IAAI;EAC9B3C,QAAQ,EAAErE,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACkH,IAAI,CAAC,CAAC;EACjE5C,QAAQ,EAAEtE,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACkH,IAAI,CAAC,CAAC;EACjEtE,EAAE,EAAE5C,SAAS,CAAC8G,MAAM;EACpBhE,IAAI,EAAE9C,SAAS,CAAC8G,MAAM;EACtBtD,MAAM,EAAExD,SAAS,CAAC6G,SAAS,CAAC,CAC1B7G,SAAS,CAAC8G,MAAM,EAChB9G,SAAS,CAACkH,IAAI,EACdlH,SAAS,CAAC+G,IAAI,EACd/G,SAAS,CAACgH,IAAI,CACf,CAAC;EACFvD,YAAY,EAAEzD,SAAS,CAAC8G,MAAM;EAC9BpD,YAAY,EAAE1D,SAAS,CAACmH,MAAM;EAC9BxD,mBAAmB,EAAE3D,SAAS,CAAC6G,SAAS,CAAC,CACvC7G,SAAS,CAAC8G,MAAM,EAChB9G,SAAS,CAACkH,IAAI,CACf,CAAC;EACFtD,YAAY,EAAE5D,SAAS,CAACoH,KAAK,CAAC;IAC5BxE,EAAE,EAAE5C,SAAS,CAAC8G,MAAM;IACpBO,OAAO,EAAErH,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACgH,IAAI,CAAC;EACjE,CAAC,CAAC;EACFnD,MAAM,EAAE7D,SAAS,CAAC6G,SAAS,CAAC,CAC1B7G,SAAS,CAAC8G,MAAM,EAChB9G,SAAS,CAAC+G,IAAI,EACd/G,SAAS,CAACgH,IAAI,CACf,CAAC;EACFhD,QAAQ,EAAEhE,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACkH,IAAI,CAAC,CAAC;EACjEjD,gBAAgB,EAAEjE,SAAS,CAACiH,KAAK,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;EACpDtF,KAAK,EAAE3B,SAAS,CAAC6G,SAAS,CAAC,CACzB7G,SAAS,CAAC8G,MAAM,EAChB9G,SAAS,CAACsH,MAAM,EAChBtH,SAAS,CAACmH,MAAM,EAChBnH,SAAS,CAACuH,KAAK,CAChB,CAAC;EACF3F,MAAM,EAAE5B,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACuH,KAAK,CAAC,CAAC;EAChEf,UAAU,EAAExG,SAAS,CAAC6G,SAAS,CAAC,CAAC7G,SAAS,CAAC8G,MAAM,EAAE9G,SAAS,CAACmH,MAAM,CAAC;AAAC,GAElEzG,gBAAgB;EAEnB6D,SAAS,EAAEvE,SAAS,CAAC8G,MAAM;EAC3BpC,QAAQ,EAAE1E,SAAS,CAAC6G,SAAS,CAAC,CAC5B7G,SAAS,CAAC8G,MAAM,EAChB9G,SAAS,CAAC+G,IAAI,EACd/G,SAAS,CAACgH,IAAI,CACf,CAAC;EAEFrC,SAAS,EAAE3E,SAAS,CAAC+G;AAAI;AA0Q7B1F,iBAAiB,CAACmG,qBAAqB,GAAG,IAAI"}

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

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

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

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

package/es/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/es/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/es/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/es/extensions/forms/Field/Number/Number.d.ts

@@ -10,7 +10,7 @@ interface ErrorMessages extends CustomErrorMessages {
     exclusiveMaximum?: string;
     multipleOf?: string;
 }
-export type Props = FieldHelpProps & FieldProps<number, undefined, ErrorMessages> & {
+export type Props = FieldHelpProps & FieldProps<number, undefined | number, ErrorMessages> & {
     inputClassName?: string;
     currency?: InputMaskedProps['as_currency'];
     currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name';
@@ -19,6 +19,8 @@ export type Props = FieldHelpProps & FieldProps<number, undefined, ErrorMessages
     step?: number;
     startWith?: number;
     decimalLimit?: number;
+    allowNegative?: boolean;
+    disallowLeadingZeroes?: boolean;
     prefix?: string;
     suffix?: string;
     minimum?: number;

package/es/extensions/forms/Field/Number/Number.js

@@ -27,6 +27,8 @@ function NumberComponent(props) {
     mask,
     step = 1,
     decimalLimit = 12,
+    allowNegative = true,
+    disallowLeadingZeroes = false,
     prefix,
     suffix,
     showStepControls
@@ -75,7 +77,9 @@ function NumberComponent(props) {
     const mask_options = {
       prefix,
       suffix,
-      decimalLimit
+      decimalLimit,
+      allowNegative,
+      disallowLeadingZeroes
     };
     if (currency) {
       return {
@@ -97,7 +101,7 @@ function NumberComponent(props) {
       mask,
       number_mask: _objectSpread({}, mask_options)
     };
-  }, [currency, currencyDisplay, decimalLimit, mask, percent, prefix, suffix]);
+  }, [currency, currencyDisplay, decimalLimit, mask, percent, prefix, suffix, allowNegative, disallowLeadingZeroes]);
   const preparedProps = _objectSpread(_objectSpread({
     valueType: 'number'
   }, props), {}, {