@dnb/eufemia 10.6.0 → 10.8.0

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

@@ -4,46 +4,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 from 'react';
 import classnames from 'classnames';
-import { InputMasked } from '../../../components';
-import { useField } from './hooks';
-import { forwardSpaceProps } from '../utils';
+import NumberComponent from './Number';
 function Currency(props) {
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
-    fromInput: ({
-      value,
-      numberValue
-    }) => {
-      if (value === '') {
-        return props.emptyValue;
-      }
-      return numberValue;
-    }
+    currency: props.currency ?? 'NOK',
+    placeholder: props.placeholder ?? 'kr'
   });
-  const {
-    className,
-    currency,
-    placeholder,
-    label,
-    value,
-    error,
-    disabled,
-    onFocus,
-    onBlur,
-    onChange
-  } = useField(preparedProps);
-  return React.createElement(InputMasked, _extends({
-    as_currency: currency ?? true,
-    className: classnames('dnb-forms-field-currency', className),
-    placeholder: placeholder ?? 'kr',
-    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
-    label: label,
-    label_direction: "vertical",
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
-    status: error === null || error === void 0 ? void 0 : error.message,
-    disabled: disabled
-  }, forwardSpaceProps(props)));
+  return React.createElement(NumberComponent, _extends({}, preparedProps, {
+    className: classnames('dnb-forms-field-currency', props.className)
+  }));
 }
 Currency._supportsEufemiaSpacingProps = true;
 export default Currency;

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","classnames","InputMasked","useField","forwardSpaceProps","Currency","props","preparedProps","_objectSpread","fromInput","value","numberValue","emptyValue","className","currency","placeholder","label","error","disabled","onFocus","onBlur","onChange","createElement","_extends","as_currency","toString","label_direction","on_focus","on_blur","on_change","status","message","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { InputMasked } from '../../../components'\nimport { useField } from './hooks'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<number> & {\n    currency?: string\n  }\n\nfunction Currency(props: Props) {\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n  }\n  const {\n    className,\n    currency,\n    placeholder,\n    label,\n    value,\n    error,\n    disabled,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <InputMasked\n      as_currency={currency ?? true}\n      className={classnames('dnb-forms-field-currency', className)}\n      placeholder={placeholder ?? 'kr'}\n      value={value?.toString() ?? ''}\n      label={label}\n      label_direction=\"vertical\"\n      on_focus={onFocus}\n      on_blur={onBlur}\n      on_change={onChange}\n      status={error?.message}\n      disabled={disabled}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nCurrency._supportsEufemiaSpacingProps = true\nexport default Currency\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,iBAAiB,QAAQ,UAAU;AAS5C,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAMC,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBF,KAAK;IACRG,SAAS,EAAEA,CAAC;MACVC,KAAK;MACLC;IAIF,CAAC,KAAK;MACJ,IAAID,KAAK,KAAK,EAAE,EAAE;QAChB,OAAOJ,KAAK,CAACM,UAAU;MACzB;MACA,OAAOD,WAAW;IACpB;EAAC,EACF;EACD,MAAM;IACJE,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,KAAK;IACLN,KAAK;IACLO,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC;EACF,CAAC,GAAGlB,QAAQ,CAACI,aAAa,CAAC;EAE3B,OACEP,KAAA,CAAAsB,aAAA,CAACpB,WAAW,EAAAqB,QAAA;IACVC,WAAW,EAAEV,QAAQ,IAAI,IAAK;IAC9BD,SAAS,EAAEZ,UAAU,CAAC,0BAA0B,EAAEY,SAAS,CAAE;IAC7DE,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCL,KAAK,EAAE,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,QAAQ,CAAC,CAAC,KAAI,EAAG;IAC/BT,KAAK,EAAEA,KAAM;IACbU,eAAe,EAAC,UAAU;IAC1BC,QAAQ,EAAER,OAAQ;IAClBS,OAAO,EAAER,MAAO;IAChBS,SAAS,EAAER,QAAS;IACpBS,MAAM,EAAEb,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,OAAQ;IACvBb,QAAQ,EAAEA;EAAS,GACfd,iBAAiB,CAACE,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,QAAQ,CAAC2B,4BAA4B,GAAG,IAAI;AAC5C,eAAe3B,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","classnames","NumberComponent","Currency","props","preparedProps","_objectSpread","currency","placeholder","createElement","_extends","className","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport NumberComponent from './Number'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<number, undefined> & {\n    currency?: string\n  }\n\nfunction Currency(props: Props) {\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? 'NOK',\n    placeholder: props.placeholder ?? 'kr',\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsEufemiaSpacingProps = true\nexport default Currency\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,eAAe,MAAM,UAAU;AAUtC,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAMC,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdF,KAAK;IACRG,QAAQ,EAAEH,KAAK,CAACG,QAAQ,IAAI,KAAK;IACjCC,WAAW,EAAEJ,KAAK,CAACI,WAAW,IAAI;EAAI,EACvC;EAED,OACER,KAAA,CAAAS,aAAA,CAACP,eAAe,EAAAQ,QAAA,KACVL,aAAa;IACjBM,SAAS,EAAEV,UAAU,CAAC,0BAA0B,EAAEG,KAAK,CAACO,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAR,QAAQ,CAACS,4BAA4B,GAAG,IAAI;AAC5C,eAAeT,QAAQ"}

package/es/extensions/forms/Field/Date.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<string>;
+import type { FieldProps, FieldHelpProps } from '../field-types';
+export type Props = ComponentProps & FieldHelpProps & FieldProps<string>;
 declare function DateComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace DateComponent {
     var _supportsEufemiaSpacingProps: boolean;

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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, { useContext } from 'react';
-import { DatePicker } from '../../../components';
+import { DatePicker, HelpButton } from '../../../components';
 import { forwardSpaceProps } from '../utils';
 import { useField } from './hooks';
 import SharedContext from '../../../shared/Context';
@@ -20,11 +20,12 @@ function DateComponent(props) {
     className,
     label,
     value,
+    help,
     error,
     disabled,
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange
   } = useField(preparedProps);
   return React.createElement(DatePicker, _extends({
     className: className,
@@ -36,9 +37,12 @@ function DateComponent(props) {
     show_input: true,
     show_cancel_button: true,
     show_reset_button: true,
-    on_change: onChange,
-    on_show: onFocus,
-    on_hide: onBlur
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_change: handleChange,
+    on_show: handleFocus,
+    on_hide: handleBlur
   }, forwardSpaceProps(props)));
 }
 DateComponent._supportsEufemiaSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","forwardSpaceProps","useField","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","className","label","value","error","disabled","onFocus","onBlur","onChange","createElement","_extends","translation","Forms","dateLabel","label_direction","status","message","show_input","show_cancel_button","show_reset_button","on_change","on_show","on_hide","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps & FieldProps<string>\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n  }\n\n  const {\n    className,\n    label,\n    value,\n    error,\n    disabled,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <DatePicker\n      className={className}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      label_direction=\"vertical\"\n      date={value}\n      status={error?.message}\n      disabled={disabled}\n      show_input={true}\n      show_cancel_button={true}\n      show_reset_button={true}\n      on_change={onChange}\n      on_show={onFocus}\n      on_hide={onBlur}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsEufemiaSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,QAAQ,QAAQ,SAAS;AAGlC,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGP,UAAU,CAACI,aAAa,CAAC;EAC/C,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBH,KAAK;IACRI,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb;EAAC,EACF;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC;EACF,CAAC,GAAGhB,QAAQ,CAACK,aAAa,CAAC;EAE3B,OACET,KAAA,CAAAqB,aAAA,CAACnB,UAAU,EAAAoB,QAAA;IACTT,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,KAAIN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,SAAS,CAAC;IAC3DC,eAAe,EAAC,UAAU;IAC1Bd,IAAI,EAAEG,KAAM;IACZY,MAAM,EAAEX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAQ;IACvBX,QAAQ,EAAEA,QAAS;IACnBY,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,SAAS,EAAEZ,QAAS;IACpBa,OAAO,EAAEf,OAAQ;IACjBgB,OAAO,EAAEf;EAAO,GACZhB,iBAAiB,CAACI,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,aAAa,CAAC6B,4BAA4B,GAAG,IAAI;AACjD,eAAe7B,aAAa"}
+{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","HelpButton","forwardSpaceProps","useField","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","className","label","value","help","error","disabled","handleFocus","handleBlur","handleChange","createElement","_extends","translation","Forms","dateLabel","label_direction","status","message","show_input","show_cancel_button","show_reset_button","suffix","title","contents","undefined","on_change","on_show","on_hide","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker, HelpButton } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps & FieldHelpProps & FieldProps<string>\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n  }\n\n  const {\n    className,\n    label,\n    value,\n    help,\n    error,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(preparedProps)\n\n  return (\n    <DatePicker\n      className={className}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      label_direction=\"vertical\"\n      date={value}\n      status={error?.message}\n      disabled={disabled}\n      show_input={true}\n      show_cancel_button={true}\n      show_reset_button={true}\n      suffix={\n        help ? (\n          <HelpButton title={help.title}>{help.contents}</HelpButton>\n        ) : undefined\n      }\n      on_change={handleChange}\n      on_show={handleFocus}\n      on_hide={handleBlur}\n      {...forwardSpaceProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsEufemiaSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,EAAEC,UAAU,QAAQ,qBAAqB;AAC5D,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,QAAQ,QAAQ,SAAS;AAGlC,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGR,UAAU,CAACK,aAAa,CAAC;EAC/C,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBH,KAAK;IACRI,SAAS,EAAEA,CAAC;MAAEC;IAAuB,CAAC,KAAK;MACzC,OAAOA,IAAI;IACb;EAAC,EACF;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGjB,QAAQ,CAACK,aAAa,CAAC;EAE3B,OACEV,KAAA,CAAAuB,aAAA,CAACrB,UAAU,EAAAsB,QAAA;IACTV,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,KAAIN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEgB,WAAW,CAACC,KAAK,CAACC,SAAS,CAAC;IAC3DC,eAAe,EAAC,UAAU;IAC1Bf,IAAI,EAAEG,KAAM;IACZa,MAAM,EAAEX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAQ;IACvBX,QAAQ,EAAEA,QAAS;IACnBY,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBC,MAAM,EACJjB,IAAI,GACFjB,KAAA,CAAAuB,aAAA,CAACpB,UAAU;MAACgC,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAAElB,IAAI,CAACmB,QAAqB,CAAC,GACzDC,SACL;IACDC,SAAS,EAAEhB,YAAa;IACxBiB,OAAO,EAAEnB,WAAY;IACrBoB,OAAO,EAAEnB;EAAW,GAChBjB,iBAAiB,CAACI,KAAK,CAAC,CAC7B,CAAC;AAEN;AAEAD,aAAa,CAACkC,4BAA4B,GAAG,IAAI;AACjD,eAAelC,aAAa"}

package/es/extensions/forms/Field/Number.d.ts

@@ -1,5 +1,6 @@
+import { InputMaskedProps } from '../../../components/InputMasked';
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
+import type { FieldProps, FieldHelpProps } from '../field-types';
 interface ErrorMessages {
     required?: string;
     schema?: string;
@@ -9,8 +10,11 @@ interface ErrorMessages {
     exclusiveMaximum?: string;
     multipleOf?: string;
 }
-export type Props = ComponentProps & FieldProps<number, undefined, ErrorMessages> & {
+export type Props = ComponentProps & FieldHelpProps & FieldProps<number, undefined, ErrorMessages> & {
     inputClassName?: string;
+    currency?: InputMaskedProps['as_currency'];
+    percent?: InputMaskedProps['as_percent'];
+    mask?: InputMaskedProps['mask'];
     thousandSeparator?: string | true;
     decimalSymbol?: string;
     decimalLimit?: number;
@@ -21,7 +25,7 @@ export type Props = ComponentProps & FieldProps<number, undefined, ErrorMessages
     exclusiveMinimum?: number;
     exclusiveMaximum?: number;
     multipleOf?: number;
-    width?: false | 'medium' | 'large' | 'stretch';
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
     rightAligned?: boolean;
 };
 declare function NumberComponent(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -2,14 +2,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 from 'react';
-import { InputMasked } from '../../../components';
+import React, { useMemo } from 'react';
+import { InputMasked, HelpButton } from '../../../components';
 import classnames from 'classnames';
 import { forwardSpaceProps } from '../utils';
 import FieldBlock from '../FieldBlock';
 import { useField } from './hooks';
 function NumberComponent(props) {
   const {
+    currency,
+    percent,
+    mask,
     thousandSeparator,
     decimalSymbol = ',',
     decimalLimit = 12,
@@ -17,6 +20,30 @@ function NumberComponent(props) {
     suffix,
     rightAligned
   } = props;
+  const maskProps = useMemo(() => {
+    if (currency) {
+      return {
+        as_currency: currency
+      };
+    }
+    if (percent) {
+      return {
+        as_percent: percent
+      };
+    }
+    return {
+      as_number: true,
+      mask,
+      number_mask: {
+        decimalLimit,
+        decimalSymbol,
+        includeThousandsSeparator: thousandSeparator !== undefined,
+        thousandsSeparatorSymbol: thousandSeparator === true ? ' ' : thousandSeparator,
+        prefix,
+        suffix
+      }
+    };
+  }, [currency, percent, mask, decimalLimit, decimalSymbol, thousandSeparator, prefix, suffix]);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
     schema: props.schema ?? {
       type: 'number',
@@ -57,11 +84,12 @@ function NumberComponent(props) {
     info,
     warning,
     error,
+    help,
     emptyValue,
     width,
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange
   } = useField(preparedProps);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-number', className),
@@ -72,28 +100,24 @@ function NumberComponent(props) {
     labelSecondary: labelSecondary,
     info: info,
     warning: warning,
-    error: error
-  }, forwardSpaceProps(props)), React.createElement(InputMasked, {
+    error: error,
+    contentsWidth: width !== false ? width : undefined
+  }, forwardSpaceProps(props)), React.createElement(InputMasked, _extends({
     id: id,
-    className: classnames('dnb-forms-field-number__input', inputClassName, width !== false && width !== 'stretch' && `dnb-forms-field-number__input--width-${width}`),
+    className: classnames('dnb-forms-field-number__input', inputClassName),
     placeholder: placeholder,
-    value: value,
-    as_number: true,
-    number_mask: {
-      decimalLimit,
-      decimalSymbol,
-      includeThousandsSeparator: thousandSeparator !== undefined,
-      thousandsSeparatorSymbol: thousandSeparator === true ? ' ' : thousandSeparator,
-      prefix,
-      suffix
-    },
+    value: value
+  }, maskProps, {
     right: rightAligned,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
-    stretch: width === 'stretch'
-  }));
+    stretch: width !== undefined,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined
+  })));
 }
 NumberComponent._supportsEufemiaSpacingProps = true;
 export default NumberComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","InputMasked","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","createElement","_extends","forId","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          width !== false &&\n            width !== 'stretch' &&\n            `dnb-forms-field-number__input--width-${width}`,\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        as_number\n        number_mask={{\n          decimalLimit,\n          decimalSymbol,\n          includeThousandsSeparator: thousandSeparator !== undefined,\n          thousandsSeparatorSymbol:\n            thousandSeparator === true ? ' ' : thousandSeparator,\n          prefix,\n          suffix,\n        }}\n        right={rightAligned}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        on_change={onChange}\n        disabled={disabled}\n        stretch={width === 'stretch'}\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useMemo","InputMasked","HelpButton","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","undefined","thousandsSeparatorSymbol","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","right","on_focus","on_blur","on_change","stretch","title","contents","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { InputMasked, HelpButton } from '../../../components'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    currency,\n    percent,\n    mask,\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    emptyValue,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        {...maskProps}\n        right={rightAligned}\n        on_focus={handleFocus}\n        on_blur={handleBlur}\n        on_change={handleChange}\n        disabled={disabled}\n        stretch={width !== undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/PhoneNumber.d.ts

@@ -1,9 +1,14 @@
+import { InputMaskedProps } from '../../../components/InputMasked';
 import type { ComponentProps } from '../component-types';
 import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<string> & {
+export type Props = ComponentProps & FieldProps<string, undefined> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
-    width?: false | 'medium' | 'large';
+    countryCodeLabel?: string;
+    numberMask?: InputMaskedProps['mask'];
+    width?: 'large' | 'stretch';
+    onCountryCodeChange?: (value: string | undefined) => void;
+    onNumberChange?: (value: string | undefined) => void;
 };
 declare function PhoneNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PhoneNumber {

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

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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, { useContext, useCallback, useMemo } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { Div } from '../../../elements';
-import { Autocomplete, Input } from '../../../components';
 import classnames from 'classnames';
-import countries from '../constants/countries';
+import CountryCode from './CountryCode';
+import StringComponent from './String';
 import { forwardSpaceProps } from '../utils';
 import { useField } from './hooks';
 import SharedContext from '../../../shared/Context';
 function PhoneNumber(props) {
-  var _ref;
   const sharedContext = useContext(SharedContext);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    value: '+47',
     errorMessages: _objectSpread({
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberErrorRequired
     }, props === null || props === void 0 ? void 0 : props.errorMessages)
@@ -23,63 +23,66 @@ function PhoneNumber(props) {
     countryCodeFieldClassName,
     numberFieldClassName,
     placeholder,
+    countryCodeLabel,
     label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
     value,
+    numberMask,
     emptyValue,
+    info,
+    warning,
     error,
     disabled,
     width = 'large',
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange,
+    onCountryCodeChange,
+    onNumberChange
   } = useField(preparedProps);
-  const [, countryCode = '+47', phoneNumber = ''] = ((_ref = value ?? '') === null || _ref === void 0 ? void 0 : _ref.match(/^(\+[^ ]+)? ?(.*)$/)) ?? [];
-  const countriesDropdownData = useMemo(() => countries.map(country => ({
-    selected_key: `+${country.code}`,
-    selected_value: `${country.iso} (+${country.code})`,
-    content: `+${country.code} ${country.name}`
-  })), []);
-  const handleCountryCodeChange = useCallback(({
-    data: changedData
-  }) => {
-    if ((!changedData || !changedData.selected_key.trim()) && !phoneNumber.trim()) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+  const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
+  const handleCountryCodeChange = useCallback(countryCode => {
+    if (!countryCode && !phoneNumber) {
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
+      onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(emptyValue);
       return;
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(`${(changedData === null || changedData === void 0 ? void 0 : changedData.selected_key) || ''} ${phoneNumber}`);
-  }, [phoneNumber, emptyValue, onChange]);
-  const handleNumberChange = useCallback(({
-    value
-  }) => {
-    if (!value.trim() && !countryCode.trim()) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+    onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(countryCode);
+  }, [phoneNumber, emptyValue, handleChange, onCountryCodeChange]);
+  const handleNumberChange = useCallback(phoneNumber => {
+    if (!countryCode && !phoneNumber) {
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
+      onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(emptyValue);
       return;
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange([countryCode, value].filter(Boolean).join(' '));
-  }, [countryCode, emptyValue, onChange]);
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+    onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
+  }, [countryCode, emptyValue, handleChange, onNumberChange]);
   return React.createElement(Div, _extends({
-    className: classnames('dnb-forms-field-phone-number', className, width !== false && `dnb-forms-field-phone-number--width-${width}`)
-  }, forwardSpaceProps(preparedProps)), React.createElement(Autocomplete, {
+    className: classnames('dnb-forms-field-phone-number', className, width !== undefined && `dnb-forms-field-phone-number--width-${width}`)
+  }, forwardSpaceProps(preparedProps)), React.createElement(CountryCode, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
-    label_direction: "vertical",
-    label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
-    data: countriesDropdownData,
+    label: countryCodeLabel,
     value: countryCode ?? '+47',
     disabled: disabled,
-    on_change: handleCountryCodeChange,
-    independent_width: true
-  }), React.createElement(Input, {
+    onChange: handleCountryCodeChange
+  }), React.createElement(StringComponent, {
     className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
-    label_direction: "vertical",
+    type: "tel",
+    emptyValue: "",
+    layout: "vertical",
     label: label ?? ' ',
     placeholder: placeholder ?? '00 00 00 00',
-    on_change: handleNumberChange,
-    on_focus: onFocus,
-    on_blur: onBlur,
+    mask: numberMask ?? [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/],
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleNumberChange,
     value: phoneNumber,
-    status: error === null || error === void 0 ? void 0 : error.message,
+    info: info,
+    warning: warning,
+    error: error,
     disabled: disabled,
-    type: "tel"
+    width: "stretch"
   }));
 }
 PhoneNumber._supportsEufemiaSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","useMemo","Div","Autocomplete","Input","classnames","countries","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","_ref","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","label","phoneNumberLabel","value","emptyValue","error","disabled","width","onFocus","onBlur","onChange","countryCode","phoneNumber","match","countriesDropdownData","map","country","selected_key","code","selected_value","iso","content","name","handleCountryCodeChange","data","changedData","trim","handleNumberChange","filter","Boolean","join","createElement","_extends","label_direction","countryCodeLabel","on_change","independent_width","on_focus","on_blur","status","message","type","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Div } from '../../../elements'\nimport { Autocomplete, Input } from '../../../components'\nimport classnames from 'classnames'\nimport countries from '../constants/countries'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    // Styling\n    width?: false | 'medium' | 'large'\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    placeholder,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    emptyValue,\n    error,\n    disabled,\n    width = 'large',\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  // Split the value into country code and phone number correctly, even if one of them is not\n  // filled in (avoiding number ending up in country code etc)\n  const [, countryCode = '+47', phoneNumber = ''] =\n    (value ?? '')?.match(/^(\\+[^ ]+)? ?(.*)$/) ?? []\n\n  const countriesDropdownData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selected_key: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const handleCountryCodeChange = useCallback(\n    ({ data: changedData }: { data: { selected_key: string } }) => {\n      if (\n        (!changedData || !changedData.selected_key.trim()) &&\n        !phoneNumber.trim()\n      ) {\n        onChange?.(emptyValue)\n        return\n      }\n\n      onChange?.(`${changedData?.selected_key || ''} ${phoneNumber}`)\n    },\n    [phoneNumber, emptyValue, onChange]\n  )\n\n  const handleNumberChange = useCallback(\n    ({ value }: { value: string }) => {\n      if (!value.trim() && !countryCode.trim()) {\n        onChange?.(emptyValue)\n        return\n      }\n\n      onChange?.([countryCode, value].filter(Boolean).join(' '))\n    },\n    [countryCode, emptyValue, onChange]\n  )\n\n  return (\n    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== false && `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...forwardSpaceProps(preparedProps)}\n    >\n      <Autocomplete\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label_direction=\"vertical\"\n        label={sharedContext?.translation.Forms.countryCodeLabel}\n        data={countriesDropdownData}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        on_change={handleCountryCodeChange}\n        independent_width\n      />\n      <Input\n        className={classnames(\n          'dnb-forms-field-phone-number__number',\n          numberFieldClassName\n        )}\n        label_direction=\"vertical\"\n        label={label ?? ' '}\n        placeholder={placeholder ?? '00 00 00 00'}\n        on_change={handleNumberChange}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        value={phoneNumber}\n        status={error?.message}\n        disabled={disabled}\n        type=\"tel\"\n      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","Div","classnames","CountryCode","StringComponent","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","sharedContext","preparedProps","_objectSpread","value","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","handleCountryCodeChange","filter","Boolean","join","handleNumberChange","createElement","_extends","onChange","type","layout","mask","onFocus","onBlur","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport CountryCode from './CountryCode'\nimport StringComponent from './String'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    // Important for the default value to be defined here, and not after the useField call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useField(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const handleCountryCodeChange = useCallback(\n    (countryCode: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  return (\n    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== undefined &&\n          `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...forwardSpaceProps(preparedProps)}\n    >\n      <CountryCode\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label={countryCodeLabel}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        onChange={handleCountryCodeChange}\n      />\n\n      <StringComponent\n        className={classnames(\n          'dnb-forms-field-phone-number__number',\n          numberFieldClassName\n        )}\n        type=\"tel\"\n        emptyValue=\"\"\n        layout=\"vertical\"\n        label={label ?? ' '}\n        placeholder={placeholder ?? '00 00 00 00'}\n        mask={\n          numberMask ?? [\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n          ]\n        }\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={handleNumberChange}\n        value={phoneNumber}\n        info={info}\n        warning={warning}\n        error={error}\n        disabled={disabled}\n        width=\"stretch\"\n      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

package/es/extensions/forms/Field/PostalCodeAndCity.d.ts

@@ -1,7 +1,7 @@
 import { Props as FieldGroupProps } from '../FieldGroup';
 import { Props as StringComponentProps } from './String';
 export type Props = Omit<FieldGroupProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps> & {
-    width?: false | 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large';
 };
 declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PostalCodeAndCity {

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

@@ -20,7 +20,7 @@ function PostalCodeAndCity(props) {
   return React.createElement(FieldGroup, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldGroupProps), React.createElement("div", {
-    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== false ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
+    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== undefined ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
   }, React.createElement(StringComponent, _extends({}, postalCode, {
     pattern: postalCode.pattern ?? '^[0-9]{4}$',
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: false | 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields',\n          width !== false &&\n            `dnb-forms-field-postal-code-and-city--width-${width}`\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        />\n        <StringComponent\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAK,KAAK,mDACkCA,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdS,OAAO,EAAET,UAAU,CAACS,OAAO,IAAI,YAAa;IAC5CD,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFE,KAAK,EACHV,UAAU,CAACU,KAAK,KAChBX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDlB,UAAU,CAACc,aAAa,CAC3B;IACFK,WAAW,EAAEnB,UAAU,CAACmB,WAAW,IAAI,MAAO;IAC9CjB,KAAK,EAAE,KAAM;IACbkB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF7B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFE,KAAK,EAAET,IAAI,CAACS,KAAK,KAAIX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDrB,IAAI,CAACa,aAAa,CACrB;IACFZ,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC0B,4BAA4B,GAAG,IAAI;AACrD,eAAe1B,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","undefined","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: 'small' | 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields',\n          width !== undefined &&\n            `dnb-forms-field-postal-code-and-city--width-${width}`\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        />\n        <StringComponent\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAKO,SAAS,mDAC8BP,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdU,OAAO,EAAEV,UAAU,CAACU,OAAO,IAAI,YAAa;IAC5CF,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFG,KAAK,EACHX,UAAU,CAACW,KAAK,KAChBZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNlB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDnB,UAAU,CAACe,aAAa,CAC3B;IACFK,WAAW,EAAEpB,UAAU,CAACoB,WAAW,IAAI,MAAO;IAC9ClB,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF9B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFG,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFb,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC2B,4BAA4B,GAAG,IAAI;AACrD,eAAe3B,iBAAiB"}

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<string | number> & {
+import type { FieldProps, FieldHelpProps } from '../field-types';
+export type Props = ComponentProps & FieldHelpProps & FieldProps<string | number> & {
     children?: React.ReactNode;
-    variant?: 'dropdown' | 'radio' | 'checkbox';
-    width?: false | 'medium' | 'large' | 'stretch';
+    variant?: 'dropdown' | 'radio' | 'button';
+    clear?: boolean;
+    optionsLayout?: 'horizontal' | 'vertical';
+    width?: 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Selection {