@dnb/eufemia 10.16.0 → 10.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useContext","DatePicker","HelpButton","useDataValue","pickSpacingProps","SharedContext","DateComponent","props","sharedContext","preparedProps","_objectSpread","fromInput","date","emptyValue","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_reset","on_show","on_hide","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { DatePicker, HelpButton } from '../../../../components'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = 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    emptyValue: null,\n  }\n\n  const {\n    className,\n    label,\n    value,\n    help,\n    error,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(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_reset={handleChange}\n      on_show={handleFocus}\n      on_hide={handleBlur}\n      {...pickSpacingProps(props)}\n    />\n  )\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,EAAEC,UAAU,QAAQ,wBAAwB;AAC/D,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AAItD,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,CAAC;IACDC,UAAU,EAAE;EAAI,EACjB;EAED,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGnB,YAAY,CAACM,aAAa,CAAC;EAE/B,OACEV,KAAA,CAAAwB,aAAA,CAACtB,UAAU,EAAAuB,QAAA;IACTV,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEiB,WAAW,CAACC,KAAK,CAACC,SAAU;IAC3DC,eAAe,EAAC,UAAU;IAC1BhB,IAAI,EAAEI,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,GACFlB,KAAA,CAAAwB,aAAA,CAACrB,UAAU;MAACiC,KAAK,EAAElB,IAAI,CAACkB;IAAM,GAAElB,IAAI,CAACmB,QAAqB,CAAC,GACzDC,SACL;IACDC,SAAS,EAAEhB,YAAa;IACxBiB,QAAQ,EAAEjB,YAAa;IACvBkB,OAAO,EAAEpB,WAAY;IACrBqB,OAAO,EAAEpB;EAAW,GAChBjB,gBAAgB,CAACG,KAAK,CAAC,CAC5B,CAAC;AAEN;AAEAD,aAAa,CAACoC,qBAAqB,GAAG,IAAI;AAC1C,eAAepC,aAAa"}
+{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","HelpButton","useDataValue","pickSpacingProps","SharedContext","classnames","FieldBlock","parseISO","isValid","DateComponent","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","dateErrorRequired","pattern","inputErrorPattern","schema","_props$schema","type","validateRequired","value","error","undefined","preparedProps","fromInput","date","id","className","label","help","info","warning","hasError","disabled","handleFocus","handleBlur","handleChange","createElement","_extends","forId","dateLabel","show_input","show_cancel_button","show_reset_button","status","suffix","title","contents","on_change","on_reset","onFocus","onBlur","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker, HelpButton } from '../../../../components'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps, JSONSchema } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { parseISO, isValid } from 'date-fns'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string> & {\n    // Validation\n    pattern?: string\n  }\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.dateErrorRequired,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const schema = useMemo<JSONSchema>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({ date }: { date: string }) => {\n      return date\n    },\n    validateRequired,\n  }\n\n  const {\n    id,\n    className,\n    label,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      label={label ?? sharedContext?.translation.Forms.dateLabel}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        show_input={true}\n        show_cancel_button={true}\n        show_reset_button={true}\n        status={hasError ? 'error' : undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n        on_change={handleChange}\n        on_reset={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...pickSpacingProps(props)}\n      />\n    </FieldBlock>\n  )\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}

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

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

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

@@ -4,7 +4,7 @@ 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, useRef } from 'react';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import { makeUniqueId } from '../../../../shared/component-helper';
 import SharedContext from '../../../../shared/Context';
 import { pickSpacingProps } from '../../../../components/flex/utils';
@@ -16,27 +16,38 @@ import { HelpButton } from '../../../../components';
 function Expiry(props) {
   var _value$substring;
   const sharedContext = useContext(SharedContext);
+  const translations = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const placeholders = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.DatePicker.placeholder_characters;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: translations.dateErrorRequired
+  }, props.errorMessages), [translations, props.errorMessages]);
+  const validateRequired = useCallback((value, {
+    required,
+    error
+  }) => {
+    return required && !value ? error : undefined;
+  }, []);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages,
+    fromInput: toExpiryString,
+    validateRequired
+  });
   const {
     id: propsId,
     className,
-    label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.expiryLabel,
+    label = translations.expiryLabel,
     error,
     info,
     warning,
     help,
     disabled,
     value = '',
-    labelDescription,
-    labelSecondary,
     layout = 'vertical',
     required,
     handleFocus,
     handleBlur,
     handleChange
-  } = useDataValue(_objectSpread(_objectSpread({}, props), {}, {
-    emptyValue: ''
-  }));
+  } = useDataValue(_objectSpread({}, preparedProps));
   const expiry = {
     month: ensureValidMonth(value === null || value === void 0 ? void 0 : value.substring(0, 2)),
     year: (_value$substring = value === null || value === void 0 ? void 0 : value.substring(2, 4)) !== null && _value$substring !== void 0 ? _value$substring : ''
@@ -45,8 +56,6 @@ function Expiry(props) {
   const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null;
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-expiry', className),
-    labelSecondary: labelSecondary,
-    labelDescription: labelDescription,
     info: info,
     warning: warning,
     error: error
@@ -60,7 +69,7 @@ function Expiry(props) {
     statusState: disabled ? 'disabled' : undefined,
     disabled: disabled,
     required: required,
-    onChange: expiry => handleChange(expiryToString(expiry)),
+    onChange: handleChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
     delimiter: "/",
@@ -82,7 +91,7 @@ function Expiry(props) {
       title: help.title
     }, help.contents) : undefined
   }));
-  function expiryToString(values) {
+  function toExpiryString(values) {
     return Object.values(values).join('');
   }
   function ensureValidMonth(month) {

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

@@ -1 +1 @@
-{"version":3,"file":"Expiry.js","names":["React","useContext","useRef","makeUniqueId","SharedContext","pickSpacingProps","useDataValue","classnames","FieldBlock","MultiInputMask","HelpButton","Expiry","props","_value$substring","sharedContext","placeholders","translation","DatePicker","placeholder_characters","id","propsId","className","label","Forms","expiryLabel","error","info","warning","help","disabled","value","labelDescription","labelSecondary","layout","required","handleFocus","handleBlur","handleChange","_objectSpread","emptyValue","expiry","month","ensureValidMonth","substring","year","idRef","current","status","createElement","_extends","stretch","labelDirection","values","statusState","undefined","onChange","expiryToString","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","suffix","title","contents","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","seconDigit","isSecondDigitValid","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useDataValue } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { HelpButton } from '../../../../components'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldProps<string> & FieldHelpProps\n\nfunction Expiry(props: ExpiryProps) {\n  const sharedContext = useContext(SharedContext)\n  const placeholders =\n    sharedContext?.translation.DatePicker.placeholder_characters\n\n  const {\n    id: propsId,\n    className,\n    label = sharedContext?.translation.Forms.expiryLabel,\n    error,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    required,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue({\n    ...props,\n    emptyValue: '',\n  })\n\n  const expiry: ExpiryValue = {\n    month: ensureValidMonth(value?.substring(0, 2)),\n    year: value?.substring(2, 4) ?? '',\n  }\n\n  const idRef = useRef(propsId || makeUniqueId()).current\n\n  const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      labelSecondary={labelSecondary}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <MultiInputMask\n        stretch\n        id={`${idRef}__input`}\n        label={label}\n        labelDirection={layout}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        required={required}\n        onChange={(expiry) => handleChange(expiryToString(expiry))}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputMode=\"numeric\"\n        inputs={[\n          {\n            id: 'month',\n            label: sharedContext?.translation.DatePicker['month'],\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n          },\n          {\n            id: 'year',\n            label: sharedContext?.translation.DatePicker['year'],\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n          },\n        ]}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n\n  function expiryToString(values: ExpiryValue) {\n    return Object.values(values).join('')\n  }\n\n  function ensureValidMonth(month: string) {\n    // Return empty value if no month is given\n    if (!month) {\n      return ''\n    }\n\n    const [firstMask, secondMask] = getMonthMask(month)\n\n    const firstDigit = month?.charAt(0)\n    const isFirstDigitValid = firstMask.test(firstDigit)\n\n    if (firstDigit && !isFirstDigitValid) {\n      // Return empty value if the first digit is invalid\n      return ''\n    }\n\n    const seconDigit = month?.charAt(1)\n    const isSecondDigitValid = secondMask.test(seconDigit)\n\n    if (seconDigit && !isSecondDigitValid) {\n      // Return empty value if the second digit is invalid\n      return ''\n    }\n\n    // Return given month of month value is valid\n    return month\n  }\n\n  function getMonthMask(month: string) {\n    const firstDigit = month?.charAt(0)\n\n    return [\n      /[0-1]/,\n      firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/,\n    ]\n  }\n}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n"],"mappings":"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"}
+{"version":3,"file":"Expiry.js","names":["React","useCallback","useContext","useMemo","useRef","makeUniqueId","SharedContext","pickSpacingProps","useDataValue","classnames","FieldBlock","MultiInputMask","HelpButton","Expiry","props","_value$substring","sharedContext","translations","translation","Forms","placeholders","DatePicker","placeholder_characters","errorMessages","_objectSpread","required","dateErrorRequired","validateRequired","value","error","undefined","preparedProps","fromInput","toExpiryString","id","propsId","className","label","expiryLabel","info","warning","help","disabled","layout","handleFocus","handleBlur","handleChange","expiry","month","ensureValidMonth","substring","year","idRef","current","status","createElement","_extends","stretch","labelDirection","values","statusState","onChange","onBlur","onFocus","delimiter","inputMode","inputs","mask","getMonthMask","placeholderCharacter","autoComplete","suffix","title","contents","Object","join","firstMask","secondMask","firstDigit","charAt","isFirstDigitValid","test","seconDigit","isSecondDigitValid","_supportsEufemiaSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Expiry/Expiry.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { useDataValue } from '../../hooks'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { MultiInputMask } from '../../../../components/input-masked'\nimport type { MultiInputMaskValue } from '../../../../components/input-masked'\nimport { HelpButton } from '../../../../components'\n\ntype ExpiryValue = MultiInputMaskValue<'month' | 'year'>\n\nexport type ExpiryProps = FieldHelpProps & FieldProps<string>\n\nfunction Expiry(props: ExpiryProps) {\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext?.translation.Forms\n  const placeholders =\n    sharedContext?.translation.DatePicker.placeholder_characters\n\n  const errorMessages = useMemo(\n    () => ({\n      required: translations.dateErrorRequired,\n      ...props.errorMessages,\n    }),\n    [translations, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      return required && !value ? error : undefined\n    },\n    []\n  )\n\n  const preparedProps: ExpiryProps = {\n    ...props,\n    errorMessages,\n    fromInput: toExpiryString,\n    validateRequired,\n  }\n\n  const {\n    id: propsId,\n    className,\n    label = translations.expiryLabel,\n    error,\n    info,\n    warning,\n    help,\n    disabled,\n    value = '',\n    layout = 'vertical',\n    required,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue({\n    ...preparedProps,\n  })\n\n  const expiry: ExpiryValue = {\n    month: ensureValidMonth(value?.substring(0, 2)),\n    year: value?.substring(2, 4) ?? '',\n  }\n\n  const idRef = useRef(propsId || makeUniqueId()).current\n\n  const status = error ? 'error' : warning ? 'warn' : info ? 'info' : null\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-expiry', className)}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <MultiInputMask\n        stretch\n        id={`${idRef}__input`}\n        label={label}\n        labelDirection={layout}\n        values={expiry}\n        status={status}\n        statusState={disabled ? 'disabled' : undefined}\n        disabled={disabled}\n        required={required}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        delimiter=\"/\"\n        inputMode=\"numeric\"\n        inputs={[\n          {\n            id: 'month',\n            label: sharedContext?.translation.DatePicker['month'],\n            mask: getMonthMask(expiry?.month),\n            placeholderCharacter: placeholders['month'],\n            autoComplete: 'cc-exp-month',\n          },\n          {\n            id: 'year',\n            label: sharedContext?.translation.DatePicker['year'],\n            mask: [/[0-9]/, /[0-9]/],\n            placeholderCharacter: placeholders['year'],\n            autoComplete: 'cc-exp-year',\n          },\n        ]}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n\n  function toExpiryString(values: ExpiryValue) {\n    return Object.values(values).join('')\n  }\n\n  function ensureValidMonth(month: string) {\n    // Return empty value if no month is given\n    if (!month) {\n      return ''\n    }\n\n    const [firstMask, secondMask] = getMonthMask(month)\n\n    const firstDigit = month?.charAt(0)\n    const isFirstDigitValid = firstMask.test(firstDigit)\n\n    if (firstDigit && !isFirstDigitValid) {\n      // Return empty value if the first digit is invalid\n      return ''\n    }\n\n    const seconDigit = month?.charAt(1)\n    const isSecondDigitValid = secondMask.test(seconDigit)\n\n    if (seconDigit && !isSecondDigitValid) {\n      // Return empty value if the second digit is invalid\n      return ''\n    }\n\n    // Return given month of month value is valid\n    return month\n  }\n\n  function getMonthMask(month: string) {\n    const firstDigit = month?.charAt(0)\n\n    return [\n      /[0-1]/,\n      firstDigit === '0' || firstDigit === '' ? /[1-9]/ : /[0-2]/,\n    ]\n  }\n}\n\nExpiry._supportsEufemiaSpacingProps = true\nexport default Expiry\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { InputMaskedProps } from '../../../../components/InputMasked';
+import type { InputAlign, InputSize } from '../../../../components/Input';
 import { FieldProps, FieldHelpProps } from '../../types';
 interface ErrorMessages {
     required?: string;
@@ -14,6 +15,7 @@ export type Props = FieldHelpProps & FieldProps<number, undefined, ErrorMessages
     currency?: InputMaskedProps['as_currency'];
     percent?: InputMaskedProps['as_percent'];
     mask?: InputMaskedProps['mask'];
+    step?: number;
     thousandSeparator?: string | true;
     decimalSymbol?: string;
     decimalLimit?: number;
@@ -24,8 +26,10 @@ export type Props = FieldHelpProps & FieldProps<number, undefined, ErrorMessages
     exclusiveMinimum?: number;
     exclusiveMaximum?: number;
     multipleOf?: number;
+    size?: InputSize;
     width?: false | 'small' | 'medium' | 'large' | 'stretch';
-    rightAligned?: boolean;
+    align?: InputAlign;
+    showStepControls?: boolean;
 };
 declare function NumberComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberComponent {

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

@@ -5,26 +5,28 @@ 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, useMemo, useCallback } from 'react';
-import { InputMasked, HelpButton } from '../../../../components';
+import { InputMasked, HelpButton, Button } from '../../../../components';
 import SharedContext from '../../../../shared/Context';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import { clamp } from '../../../../components/slider/SliderHelpers';
 function NumberComponent(props) {
-  var _props$width;
+  var _props$width, _sharedContext$transl, _sharedContext$transl2;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     currency,
     percent,
     mask,
+    step = 1,
     thousandSeparator,
     decimalSymbol,
     decimalLimit = 12,
     prefix,
     suffix,
-    rightAligned
+    showStepControls
   } = props;
   const errorMessages = useMemo(() => _objectSpread({
     required: tr.inputErrorRequired,
@@ -56,9 +58,15 @@ function NumberComponent(props) {
     numberValue
   }) => {
     if (value === '') {
-      return emptyValue;
+      return props.emptyValue;
     }
     return numberValue;
+  }, [props.emptyValue]);
+  const transformValue = useCallback((value, currentValue) => {
+    if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
+      return currentValue;
+    }
+    return value;
   }, []);
   const maskProps = useMemo(() => {
     if (currency) {
@@ -89,6 +97,7 @@ function NumberComponent(props) {
     schema,
     toInput,
     fromInput,
+    transformValue,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
   });
   const {
@@ -100,53 +109,122 @@ function NumberComponent(props) {
     layout,
     placeholder,
     label,
-    labelDescription,
-    labelSecondary,
     value,
+    minimum = Number.MIN_SAFE_INTEGER,
+    maximum = Number.MAX_SAFE_INTEGER,
     disabled,
     info,
     warning,
     error,
     help,
-    emptyValue,
+    size,
     width,
+    align,
     handleFocus,
     handleBlur,
     handleChange
   } = useDataValue(preparedProps);
-  return React.createElement(FieldBlock, _extends({
+  const onKeyDownHandler = useCallback(({
+    key,
+    event
+  }) => {
+    if (!showStepControls) {
+      return;
+    }
+    let numberValue = null;
+    switch (key) {
+      case 'ArrowUp':
+        numberValue = clamp(value + step, minimum, maximum);
+        break;
+      case 'ArrowDown':
+        numberValue = clamp(value - step, minimum, maximum);
+        break;
+    }
+    if (numberValue !== null) {
+      event.persist();
+      event.preventDefault();
+      handleChange({
+        numberValue
+      });
+    }
+  }, [handleChange, maximum, minimum, showStepControls, step, value]);
+  const fieldBlockProps = _objectSpread({
     className: classnames('dnb-forms-field-number', className),
+    contentClassName: classnames('dnb-forms-field-number__contents', showStepControls && 'dnb-forms-field-number__contents--has-controls', disabled && 'dnb-forms-field-number__contents--is-disabled', error && 'dnb-forms-field-number__contents--has-error'),
     forId: id,
-    layout: layout,
-    label: label,
-    labelDescription: labelDescription,
-    labelSecondary: labelSecondary,
-    info: info,
-    warning: warning,
-    error: error,
-    disabled: disabled,
+    layout,
+    label,
+    info,
+    warning,
+    error,
+    disabled,
     width: width === 'stretch' ? width : undefined,
     contentsWidth: width !== false ? width : undefined
-  }, pickSpacingProps(props)), React.createElement(InputMasked, _extends({
-    id: id,
-    name: name,
-    autoComplete: autoComplete,
-    className: classnames('dnb-forms-field-number__input', inputClassName),
-    placeholder: placeholder,
-    value: value
-  }, maskProps, {
-    align: rightAligned && 'right',
-    on_focus: handleFocus,
-    on_blur: handleBlur,
-    on_change: handleChange,
-    disabled: disabled,
+  }, pickSpacingProps(props));
+  const increaseProps = showStepControls && {
+    'aria-hidden': true,
+    className: 'dnb-button--control-after',
+    variant: 'secondary',
+    icon: 'add',
+    size: convertInputSizeToButtonSize(size),
+    tabIndex: -1,
+    disabled: disabled || value >= maximum,
+    onClick: () => {
+      handleChange({
+        numberValue: clamp(value + step, minimum, maximum)
+      });
+    },
+    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl = sharedContext.translation.Slider.addTitle) === null || _sharedContext$transl === void 0 ? void 0 : _sharedContext$transl.replace('%s', String(value + step))
+  };
+  const decreaseProps = showStepControls && _objectSpread(_objectSpread({}, increaseProps), {}, {
+    className: 'dnb-button--control-before',
+    icon: 'subtract',
+    disabled: disabled || value <= minimum,
+    onClick: () => {
+      handleChange({
+        numberValue: clamp(value - step, minimum, maximum)
+      });
+    },
+    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl2 = sharedContext.translation.Slider.subtractTitle) === null || _sharedContext$transl2 === void 0 ? void 0 : _sharedContext$transl2.replace('%s', String(value - step))
+  });
+  const ariaParams = showStepControls && {
+    role: 'spinbutton',
+    'aria-valuemin': String(minimum),
+    'aria-valuemax': String(maximum),
+    'aria-valuenow': String(value),
+    'aria-valuetext': String(value)
+  };
+  const inputProps = _objectSpread(_objectSpread({
+    id,
+    name,
+    autoComplete,
+    className: classnames(`dnb-forms-field-number__input dnb-input--${size}`, inputClassName),
+    step,
+    placeholder,
+    value,
+    align: showStepControls ? 'center' : align
+  }, maskProps), {}, {
+    onKeyDown: onKeyDownHandler,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    disabled,
     status: error ? 'error' : undefined,
     stretch: width !== undefined,
-    suffix: help ? React.createElement(HelpButton, {
+    suffix: help && !showStepControls ? React.createElement(HelpButton, {
       title: help.title
     }, help.contents) : undefined
-  })));
+  }, ariaParams);
+  return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
+    asFieldset: false
+  }), showStepControls && React.createElement(Button, decreaseProps), React.createElement(InputMasked, inputProps), showStepControls && React.createElement(Button, increaseProps), help && showStepControls && React.createElement(HelpButton, {
+    title: help.title
+  }, help.contents));
 }
+const convertInputSizeToButtonSize = inputSize => {
+  const buttonSize = ['small', 'medium', 'large'].indexOf(inputSize) > -1 ? inputSize : 'medium';
+  return buttonSize;
+};
 NumberComponent._supportsSpacingProps = true;
 export default NumberComponent;
 //# sourceMappingURL=Number.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","SharedContext","classnames","FieldBlock","useDataValue","pickSpacingProps","NumberComponent","props","_props$width","sharedContext","tr","translation","Forms","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","errorMessages","_objectSpread","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","align","on_focus","on_blur","on_change","status","stretch","title","contents","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { JSONSchema7 } from 'json-schema'\nimport { InputMasked, HelpButton } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\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 = 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 sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\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 errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      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    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    []\n  )\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    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\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  } = useDataValue(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      disabled={disabled}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <InputMasked\n        id={id}\n        name={name}\n        autoComplete={autoComplete}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        {...maskProps}\n        align={rightAligned && 'right'}\n        on_focus={handleFocus}\n        on_blur={handleBlur}\n        on_change={handleChange}\n        disabled={disabled}\n        status={error ? 'error' : undefined}\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._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","sharedContext","tr","translation","Forms","currency","percent","mask","step","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","showStepControls","errorMessages","_objectSpread","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","disabled","info","warning","error","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentsWidth","increaseProps","variant","icon","convertInputSizeToButtonSize","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","createElement","contents","_extends","asFieldset","inputSize","buttonSize","indexOf","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps, JSONSchema } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\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 = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\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    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    step = 1,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema>(\n    () =>\n      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    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\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    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      error && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    info,\n    warning,\n    error,\n    disabled,\n    width: width === 'stretch' ? width : undefined,\n    contentsWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: convertInputSizeToButtonSize(size),\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invlaid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    status: error ? 'error' : undefined,\n    stretch: width !== undefined,\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.contents}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.contents}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nconst convertInputSizeToButtonSize = (\n  inputSize: InputSize\n): ButtonSize => {\n  const buttonSize =\n    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1\n      ? inputSize\n      : 'medium'\n  return buttonSize as ButtonSize\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AAC/D,SAASC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAGxE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE,SAASC,KAAK,QAAQ,6CAA6C;AAsCnE,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA,EAAAC,qBAAA,EAAAC,sBAAA;EACrC,MAAMC,aAAa,GAAGjB,UAAU,CAACM,aAAa,CAAC;EAC/C,MAAMY,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IACJC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,IAAI,GAAG,CAAC;IACRC,iBAAiB;IACjBC,aAAa;IACbC,YAAY,GAAG,EAAE;IACjBC,MAAM;IACNC,MAAM;IACNC;EACF,CAAC,GAAGjB,KAAK;EAET,MAAMkB,aAAa,GAAG9B,OAAO,CAC3B,MAAA+B,aAAA;IACEC,QAAQ,EAAEf,EAAE,CAACgB,kBAAkB;IAC/BC,OAAO,EAAEjB,EAAE,CAACkB,uBAAuB;IACnCC,OAAO,EAAEnB,EAAE,CAACoB,uBAAuB;IACnCC,gBAAgB,EAAErB,EAAE,CAACsB,gCAAgC;IACrDC,gBAAgB,EAAEvB,EAAE,CAACwB,gCAAgC;IACrDC,UAAU,EAAEzB,EAAE,CAAC0B;EAA0B,GACtC/B,KAAK,CAACkB,aAAa,CACtB,EACF,CAACb,EAAE,EAAEL,KAAK,CAACkB,aAAa,CAC1B,CAAC;EACD,MAAMc,MAAM,GAAG5C,OAAO,CACpB;IAAA,IAAA6C,aAAA;IAAA,QAAAA,aAAA,GACEjC,KAAK,CAACgC,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdZ,OAAO,EAAEtB,KAAK,CAACsB,OAAO;MACtBE,OAAO,EAAExB,KAAK,CAACwB,OAAO;MACtBE,gBAAgB,EAAE1B,KAAK,CAAC0B,gBAAgB;MACxCE,gBAAgB,EAAE5B,KAAK,CAAC4B,gBAAgB;MACxCE,UAAU,EAAE9B,KAAK,CAAC8B;IACpB,CAAC;EAAA,GACH,CACE9B,KAAK,CAACgC,MAAM,EACZhC,KAAK,CAACsB,OAAO,EACbtB,KAAK,CAACwB,OAAO,EACbxB,KAAK,CAAC0B,gBAAgB,EACtB1B,KAAK,CAAC4B,gBAAgB,EACtB5B,KAAK,CAAC8B,UAAU,CAEpB,CAAC;EAED,MAAMK,OAAO,GAAG9C,WAAW,CAAE+C,QAA4B,IAAK;IAC5D,IAAIA,QAAQ,KAAKC,SAAS,EAAE;MAC1B,OAAO,EAAE;IACX;IACA,OAAOD,QAAQ;EACjB,CAAC,EAAE,EAAE,CAAC;EACN,MAAME,SAAS,GAAGjD,WAAW,CAC3B,CAAC;IAAEkD,KAAK;IAAEC;EAAoD,CAAC,KAAK;IAClE,IAAID,KAAK,KAAK,EAAE,EAAE;MAChB,OAAOvC,KAAK,CAACyC,UAAU;IACzB;IACA,OAAOD,WAAW;EACpB,CAAC,EACD,CAACxC,KAAK,CAACyC,UAAU,CACnB,CAAC;EACD,MAAMC,cAAc,GAAGrD,WAAW,CAChC,CAACkD,KAAa,EAAEI,YAAoB,KAAK;IACvC,IACEJ,KAAK,GAAGK,MAAM,CAACC,gBAAgB,IAC/BN,KAAK,GAAGK,MAAM,CAACE,gBAAgB,EAC/B;MACA,OAAOH,YAAY;IACrB;IAEA,OAAOJ,KAAK;EACd,CAAC,EACD,EACF,CAAC;EAED,MAAMQ,SAAoC,GAAG3D,OAAO,CAAC,MAAM;IACzD,IAAIoB,QAAQ,EAAE;MACZ,OAAO;QACLwC,WAAW,EAAExC;MACf,CAAC;IACH;IACA,IAAIC,OAAO,EAAE;MACX,OAAO;QACLwC,UAAU,EAAExC;MACd,CAAC;IACH;IAEA,OAAO;MACLyC,SAAS,EAAE,IAAI;MACfxC,IAAI;MACJyC,WAAW,EAAE;QACXrC,YAAY;QACZD,aAAa;QACbuC,yBAAyB,EAAExC,iBAAiB,KAAKyB,SAAS;QAC1DgB,wBAAwB,EACtBzC,iBAAiB,KAAK,IAAI,GAAG,GAAG,GAAGA,iBAAiB;QACtDG,MAAM;QACNC;MACF;IACF,CAAC;EACH,CAAC,EAAE,CACDR,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJI,YAAY,EACZD,aAAa,EACbD,iBAAiB,EACjBG,MAAM,EACNC,MAAM,CACP,CAAC;EAEF,MAAMsC,aAAoB,GAAAnC,aAAA,CAAAA,aAAA,KACrBnB,KAAK;IACRkB,aAAa;IACbc,MAAM;IACNG,OAAO;IACPG,SAAS;IACTI,cAAc;IACda,KAAK,GAAAtD,YAAA,GAAED,KAAK,CAACuD,KAAK,cAAAtD,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,MAAM;IACJuD,EAAE;IACFC,IAAI;IACJC,SAAS;IACTC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC,WAAW;IACXC,KAAK;IACLxB,KAAK;IACLjB,OAAO,GAAGsB,MAAM,CAACE,gBAAgB;IACjCtB,OAAO,GAAGoB,MAAM,CAACC,gBAAgB;IACjCmB,QAAQ;IACRC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,IAAI;IACJd,KAAK;IACLe,KAAK;IACLC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAG7E,YAAY,CAAC0D,aAAa,CAAC;EAE/B,MAAMoB,gBAAgB,GAAGrF,WAAW,CAClC,CAAC;IAAEsF,GAAG;IAAEC;EAAM,CAAC,KAAK;IAClB,IAAI,CAAC3D,gBAAgB,EAAE;MACrB;IACF;IAEA,IAAIuB,WAAW,GAAG,IAAI;IAEtB,QAAQmC,GAAG;MACT,KAAK,SAAS;QACZnC,WAAW,GAAG1C,KAAK,CAAEyC,KAAK,GAAc5B,IAAI,EAAEW,OAAO,EAAEE,OAAO,CAAC;QAC/D;MACF,KAAK,WAAW;QACdgB,WAAW,GAAG1C,KAAK,CAAEyC,KAAK,GAAc5B,IAAI,EAAEW,OAAO,EAAEE,OAAO,CAAC;QAC/D;IACJ;IAEA,IAAIgB,WAAW,KAAK,IAAI,EAAE;MACxBoC,KAAK,CAACC,OAAO,CAAC,CAAC;MACfD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBL,YAAY,CAAC;QAAEjC;MAAY,CAAC,CAAC;IAC/B;EACF,CAAC,EACD,CAACiC,YAAY,EAAEjD,OAAO,EAAEF,OAAO,EAAEL,gBAAgB,EAAEN,IAAI,EAAE4B,KAAK,CAChE,CAAC;EAED,MAAMwC,eAAe,GAAA5D,aAAA;IACnBuC,SAAS,EAAEhE,UAAU,CAAC,wBAAwB,EAAEgE,SAAS,CAAC;IAC1DsB,gBAAgB,EAAEtF,UAAU,CAC1B,kCAAkC,EAClCuB,gBAAgB,IAAI,gDAAgD,EACpE+C,QAAQ,IAAI,+CAA+C,EAC3DG,KAAK,IAAI,6CACX,CAAC;IACDc,KAAK,EAAEzB,EAAE;IACTK,MAAM;IACNE,KAAK;IACLE,IAAI;IACJC,OAAO;IACPC,KAAK;IACLH,QAAQ;IACRT,KAAK,EAAEA,KAAK,KAAK,SAAS,GAAGA,KAAK,GAAGlB,SAAS;IAC9C6C,aAAa,EAAE3B,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAGlB;EAAS,GAC/CxC,gBAAgB,CAACG,KAAK,CAAC,CAC3B;EAED,MAAMmF,aAA0B,GAAGlE,gBAAgB,IAAI;IACrD,aAAa,EAAE,IAAI;IACnByC,SAAS,EAAE,2BAA2B;IACtC0B,OAAO,EAAE,WAAW;IACpBC,IAAI,EAAE,KAAK;IACXhB,IAAI,EAAEiB,4BAA4B,CAACjB,IAAI,CAAC;IACxCkB,QAAQ,EAAE,CAAC,CAAC;IACZvB,QAAQ,EAAEA,QAAQ,IAAIzB,KAAK,IAAIf,OAAO;IACtCgE,OAAO,EAAEA,CAAA,KAAM;MACbf,YAAY,CAAC;QACXjC,WAAW,EAAE1C,KAAK,CAAEyC,KAAK,GAAc5B,IAAI,EAAEW,OAAO,EAAEE,OAAO;MAC/D,CAAC,CAAC;IACJ,CAAC;IACDiE,KAAK,EAAErF,aAAa,aAAbA,aAAa,wBAAAF,qBAAA,GAAbE,aAAa,CAAEE,WAAW,CAACoF,MAAM,CAACC,QAAQ,cAAAzF,qBAAA,uBAA1CA,qBAAA,CAA4C0F,OAAO,CACxD,IAAI,EACJC,MAAM,CAACtD,KAAK,GAAG5B,IAAI,CACrB;EACF,CAAC;EAED,MAAMmF,aAA0B,GAAG7E,gBAAgB,IAAAE,aAAA,CAAAA,aAAA,KAC9CgE,aAAa;IAChBzB,SAAS,EAAE,4BAA4B;IACvC2B,IAAI,EAAE,UAAU;IAChBrB,QAAQ,EAAEA,QAAQ,IAAIzB,KAAK,IAAIjB,OAAO;IACtCkE,OAAO,EAAEA,CAAA,KAAM;MACbf,YAAY,CAAC;QACXjC,WAAW,EAAE1C,KAAK,CAAEyC,KAAK,GAAc5B,IAAI,EAAEW,OAAO,EAAEE,OAAO;MAC/D,CAAC,CAAC;IACJ,CAAC;IACDiE,KAAK,EAAErF,aAAa,aAAbA,aAAa,wBAAAD,sBAAA,GAAbC,aAAa,CAAEE,WAAW,CAACoF,MAAM,CAACK,aAAa,cAAA5F,sBAAA,uBAA/CA,sBAAA,CAAiDyF,OAAO,CAC7D,IAAI,EACJC,MAAM,CAACtD,KAAK,GAAG5B,IAAI,CACrB;EAAC,EACF;EAED,MAAMqF,UAAU,GAAG/E,gBAAgB,IAAI;IACrCgF,IAAI,EAAE,YAAY;IAClB,eAAe,EAAEJ,MAAM,CAACvE,OAAO,CAAC;IAChC,eAAe,EAAEuE,MAAM,CAACrE,OAAO,CAAC;IAChC,eAAe,EAAEqE,MAAM,CAACtD,KAAK,CAAC;IAC9B,gBAAgB,EAAEsD,MAAM,CAACtD,KAAK;EAChC,CAAC;EAED,MAAM2D,UAAU,GAAA/E,aAAA,CAAAA,aAAA;IACdqC,EAAE;IACFC,IAAI;IACJE,YAAY;IACZD,SAAS,EAAEhE,UAAU,6CAEL2E,IAAK,IACnBT,cACF,CAAC;IACDjD,IAAI;IACJmD,WAAW;IACXvB,KAAK;IACL+B,KAAK,EAAErD,gBAAgB,GAAG,QAAQ,GAAGqD;EAAK,GACvCvB,SAAS;IACZoD,SAAS,EAAEzB,gBAAgB;IAC3B0B,OAAO,EAAE7B,WAAW;IACpB8B,MAAM,EAAE7B,UAAU;IAClB8B,QAAQ,EAAE7B,YAAY;IACtBT,QAAQ;IACRuC,MAAM,EAAEpC,KAAK,GAAG,OAAO,GAAG9B,SAAS;IACnCmE,OAAO,EAAEjD,KAAK,KAAKlB,SAAS;IAC5BrB,MAAM,EACJoD,IAAI,IAAI,CAACnD,gBAAgB,GACvB/B,KAAA,CAAAuH,aAAA,CAAClH,UAAU;MAACkG,KAAK,EAAErB,IAAI,CAACqB;IAAM,GAAErB,IAAI,CAACsC,QAAqB,CAAC,GACzDrE;EAAS,GACZ2D,UAAU,CACd;EAED,OACE9G,KAAA,CAAAuH,aAAA,CAAC9G,UAAU,EAAAgH,QAAA,KAAK5B,eAAe;IAAE6B,UAAU,EAAE;EAAM,IAChD3F,gBAAgB,IAAI/B,KAAA,CAAAuH,aAAA,CAACjH,MAAM,EAAKsG,aAAgB,CAAC,EAClD5G,KAAA,CAAAuH,aAAA,CAACnH,WAAW,EAAK4G,UAAa,CAAC,EAC9BjF,gBAAgB,IAAI/B,KAAA,CAAAuH,aAAA,CAACjH,MAAM,EAAK2F,aAAgB,CAAC,EACjDf,IAAI,IAAInD,gBAAgB,IACvB/B,KAAA,CAAAuH,aAAA,CAAClH,UAAU;IAACkG,KAAK,EAAErB,IAAI,CAACqB;EAAM,GAAErB,IAAI,CAACsC,QAAqB,CAElD,CAAC;AAEjB;AAEA,MAAMpB,4BAA4B,GAChCuB,SAAoB,IACL;EACf,MAAMC,UAAU,GACd,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAACC,OAAO,CAACF,SAAmB,CAAC,GAAG,CAAC,CAAC,GAC1DA,SAAS,GACT,QAAQ;EACd,OAAOC,UAAU;AACnB,CAAC;AAED/G,eAAe,CAACiH,qBAAqB,GAAG,IAAI;AAC5C,eAAejH,eAAe"}