@dnb/eufemia 10.16.0 → 10.17.0

package/es/components/textarea/style/dnb-textarea.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{background-color:var(--color-white);border-radius:.25rem;bottom:-.5rem;box-shadow:0 0 0 .0625rem var(--color-sea-green);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:1rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}
+.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{background-color:var(--color-white);border-radius:.25rem;bottom:-.5rem;box-shadow:0 0 0 .0625rem var(--color-sea-green);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:1rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}

package/es/components/textarea/style/dnb-textarea.scss

@@ -71,6 +71,10 @@
     @include textareaStyleCommon();
 
     @include scrollY(auto);
+
+    @include IS_FF() {
+      overflow-x: clip;
+    }
   }
 
   // change the autocomplete appearance once filled out

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

@@ -1,9 +1,5 @@
 import { Props as NumberProps } from '../Number';
-import type { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<number, undefined> & {
-    currency?: NumberProps['currency'];
-    rightAligned?: NumberProps['rightAligned'];
-};
+export type Props = NumberProps;
 declare function Currency(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Currency {
     var _supportsSpacingProps: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","classnames","Context","getCurrencySymbol","CURRENCY","NumberComponent","Currency","props","_props$currency","_props$placeholder","context","useContext","preparedProps","_objectSpread","currency","placeholder","locale","createElement","_extends","className","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Context } from '../../../../shared'\nimport { getCurrencySymbol } from '../../../../components/number-format/NumberUtils'\nimport { CURRENCY } from '../../../../shared/defaults'\nimport NumberComponent, { Props as NumberProps } from '../Number'\nimport type { FieldProps, FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined> & {\n    currency?: NumberProps['currency']\n    rightAligned?: NumberProps['rightAligned']\n  }\n\nfunction Currency(props: Props) {\n  const context = React.useContext(Context)\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? CURRENCY,\n    placeholder:\n      props.placeholder ??\n      getCurrencySymbol(context?.locale, props.currency),\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,kDAAkD;AACpF,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,eAAe,MAAgC,WAAW;AASjE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA,EAAAC,kBAAA;EAC9B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,OAAO,CAAC;EACzC,MAAMU,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdN,KAAK;IACRO,QAAQ,GAAAN,eAAA,GAAED,KAAK,CAACO,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAIJ,QAAQ;IACpCW,WAAW,GAAAN,kBAAA,GACTF,KAAK,CAACQ,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBN,iBAAiB,CAACO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAET,KAAK,CAACO,QAAQ;EAAC,EACrD;EAED,OACEd,KAAA,CAAAiB,aAAA,CAACZ,eAAe,EAAAa,QAAA,KACVN,aAAa;IACjBO,SAAS,EAAElB,UAAU,CAAC,0BAA0B,EAAEM,KAAK,CAACY,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAb,QAAQ,CAACc,qBAAqB,GAAG,IAAI;AACrC,eAAed,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","classnames","Context","getCurrencySymbol","CURRENCY","NumberComponent","Currency","props","_props$currency","_props$placeholder","context","useContext","preparedProps","_objectSpread","currency","placeholder","locale","createElement","_extends","className","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Context } from '../../../../shared'\nimport { getCurrencySymbol } from '../../../../components/number-format/NumberUtils'\nimport { CURRENCY } from '../../../../shared/defaults'\nimport NumberComponent, { Props as NumberProps } from '../Number'\n\nexport type Props = NumberProps\n\nfunction Currency(props: Props) {\n  const context = React.useContext(Context)\n  const preparedProps = {\n    ...props,\n    currency: props.currency ?? CURRENCY,\n    placeholder:\n      props.placeholder ??\n      getCurrencySymbol(context?.locale, props.currency),\n  }\n\n  return (\n    <NumberComponent\n      {...preparedProps}\n      className={classnames('dnb-forms-field-currency', props.className)}\n    />\n  )\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,iBAAiB,QAAQ,kDAAkD;AACpF,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,eAAe,MAAgC,WAAW;AAIjE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA,EAAAC,kBAAA;EAC9B,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,OAAO,CAAC;EACzC,MAAMU,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdN,KAAK;IACRO,QAAQ,GAAAN,eAAA,GAAED,KAAK,CAACO,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAIJ,QAAQ;IACpCW,WAAW,GAAAN,kBAAA,GACTF,KAAK,CAACQ,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBN,iBAAiB,CAACO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAET,KAAK,CAACO,QAAQ;EAAC,EACrD;EAED,OACEd,KAAA,CAAAiB,aAAA,CAACZ,eAAe,EAAAa,QAAA,KACVN,aAAa;IACjBO,SAAS,EAAElB,UAAU,CAAC,0BAA0B,EAAEM,KAAK,CAACY,SAAS;EAAE,EACpE,CAAC;AAEN;AAEAb,QAAQ,CAACc,qBAAqB,GAAG,IAAI;AACrC,eAAed,QAAQ"}

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

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

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

@@ -4,50 +4,90 @@ 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 } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { DatePicker, HelpButton } from '../../../../components';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
+import classnames from 'classnames';
+import FieldBlock from '../../FieldBlock';
+import { parseISO, isValid } from 'date-fns';
 function DateComponent(props) {
   const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: tr.dateErrorRequired,
+    pattern: tr.inputErrorPattern
+  }, props.errorMessages), [tr, props.errorMessages]);
+  const schema = useMemo(() => {
+    var _props$schema;
+    return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
+      type: 'string',
+      pattern: props.pattern
+    };
+  }, [props.schema, props.pattern]);
+  const validateRequired = useCallback((value, {
+    required,
+    error
+  }) => {
+    if (required && (!value || !isValid(parseISO(value)))) {
+      return error;
+    }
+    return undefined;
+  }, []);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages,
+    schema,
     fromInput: ({
       date
     }) => {
       return date;
     },
-    emptyValue: null
+    validateRequired
   });
   const {
+    id,
     className,
     label,
+    labelDescription,
+    labelSecondary,
     value,
     help,
+    info,
+    warning,
     error,
+    hasError,
     disabled,
     handleFocus,
     handleBlur,
     handleChange
   } = useDataValue(preparedProps);
-  return React.createElement(DatePicker, _extends({
-    className: className,
+  return React.createElement(FieldBlock, _extends({
+    className: classnames('dnb-forms-field-string', className),
+    forId: id,
     label: label !== null && label !== void 0 ? label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.dateLabel,
-    label_direction: "vertical",
+    labelDescription: labelDescription,
+    labelSecondary: labelSecondary,
+    info: info,
+    warning: warning,
+    disabled: disabled,
+    error: error
+  }, pickSpacingProps(props)), React.createElement(DatePicker, _extends({
+    id: id,
     date: value,
-    status: error === null || error === void 0 ? void 0 : error.message,
     disabled: disabled,
     show_input: true,
     show_cancel_button: true,
     show_reset_button: true,
+    status: error || hasError ? 'error' : undefined,
     suffix: help ? React.createElement(HelpButton, {
       title: help.title
     }, help.contents) : undefined,
     on_change: handleChange,
     on_reset: handleChange,
-    on_show: handleFocus,
-    on_hide: handleBlur
-  }, pickSpacingProps(props)));
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, pickSpacingProps(props))));
 }
 DateComponent._supportsSpacingProps = true;
 export default DateComponent;

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","labelDescription","labelSecondary","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 } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport { JSONSchema7 } from 'json-schema'\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<JSONSchema7>(\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    labelDescription,\n    labelSecondary,\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      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\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={error || 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/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,8 @@ function NumberComponent(props) {
     schema,
     toInput,
     fromInput,
+    transformValue,
+    size: props.size !== 'small' && props.size !== 'large' ? 'medium' : props.size,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
   });
   const {
@@ -103,50 +113,123 @@ function NumberComponent(props) {
     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,
+    labelDescription,
+    labelSecondary,
+    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","size","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","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 { JSONSchema7 } from 'json-schema'\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 } 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<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 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    size:\n      props.size !== 'small' && props.size !== 'large'\n        ? 'medium'\n        : props.size,\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    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    labelDescription,\n    labelSecondary,\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":"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"}