fix(Field.Currency): handle big numbers (#3184)

- Fixes #3124
- Relies on PR #3185 and will be rebased from main later: ✅

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx

@@ -17,8 +17,8 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `percent`                               | `boolean`            | _(optional)_ Format a number as percentage.                                                                                                                     |
 | `prefix`                                | `string`             | _(optional)_ Text added before the value input.                                                                                                                 |
 | `suffix`                                | `string`             | _(optional)_ Text added after the value input.                                                                                                                  |
-| `minimum`                               | `number`             | _(optional)_ Validation for inclusive minimum number value (greater than or equal).                                                                             |
-| `maximum`                               | `number`             | _(optional)_ Validation for inclusive maximum number value (less than or equal).                                                                                |
+| `minimum`                               | `number`             | _(optional)_ Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.                                      |
+| `maximum`                               | `number`             | _(optional)_ Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`.                                         |
 | `exclusiveMinimum`                      | `number`             | _(optional)_ Validation for exclusive minimum number value (greater than).                                                                                      |
 | `exclusiveMaximum`                      | `number`             | _(optional)_ Validation for exclusive maximum number value (less than).                                                                                         |
 | `multipleOf`                            | `number`             | _(optional)_ Validation that requires the number to be a multiple of given value.                                                                               |

packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx

@@ -112,6 +112,19 @@ function NumberComponent(props: Props) {
     },
     [props.emptyValue]
   )
+  const transformValue = useCallback(
+    (value: number, currentValue: number) => {
+      if (
+        value > Number.MAX_SAFE_INTEGER ||
+        value < Number.MIN_SAFE_INTEGER
+      ) {
+        return currentValue
+      }
+
+      return value
+    },
+    []
+  )
 
   const maskProps: Partial<InputMaskedProps> = useMemo(() => {
     if (currency) {
@@ -155,6 +168,7 @@ function NumberComponent(props: Props) {
     schema,
     toInput,
     fromInput,
+    transformValue,
     size:
       props.size !== 'small' && props.size !== 'large'
         ? 'medium'
@@ -174,8 +188,8 @@ function NumberComponent(props: Props) {
     labelDescription,
     labelSecondary,
     value,
-    minimum,
-    maximum,
+    minimum = Number.MIN_SAFE_INTEGER,
+    maximum = Number.MAX_SAFE_INTEGER,
     disabled,
     info,
     warning,

packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx

@@ -24,6 +24,42 @@ describe('Field.Number', () => {
       expect(screen.getByLabelText('Number label')).toBeInTheDocument()
     })
 
+    it('corrects minimum number', () => {
+      render(<Field.Number value={Number.MIN_SAFE_INTEGER} />)
+
+      const input = document.querySelector('input')
+
+      fireEvent.change(input, {
+        target: {
+          value: String(Number.MIN_SAFE_INTEGER - 1),
+        },
+      })
+
+      expect(input).toHaveValue(String(Number.MIN_SAFE_INTEGER - 1))
+
+      fireEvent.blur(input)
+
+      expect(input).toHaveValue(String(Number.MIN_SAFE_INTEGER))
+    })
+
+    it('corrects maximum number', () => {
+      render(<Field.Number value={Number.MAX_SAFE_INTEGER} />)
+
+      const input = document.querySelector('input')
+
+      fireEvent.change(input, {
+        target: {
+          value: String(Number.MAX_SAFE_INTEGER + 1),
+        },
+      })
+
+      expect(input).toHaveValue(String(Number.MAX_SAFE_INTEGER + 1))
+
+      fireEvent.blur(input)
+
+      expect(input).toHaveValue(String(Number.MAX_SAFE_INTEGER))
+    })
+
     it('should support disabled prop', () => {
       const { rerender } = render(
         <Field.Number label="Disabled label" disabled />