Add support for negative numbers in MoneyInput component (#2495)

* fix(money-input): fix support for negative numbers

* chore: changeset added

.changeset/warm-yaks-admire.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/money-input': patch
+---
+
+Add support for negative numbers.

packages/components/inputs/money-input/src/money-input.spec.js

@@ -657,6 +657,21 @@ describe('MoneyInput', () => {
     expect(screen.getByLabelText('Amount')).toHaveAttribute('value', '12.00');
   });
 
+  it('should format the amount on blur for negative numbers', () => {
+    render(<TestComponent />);
+
+    // change amount
+    fireEvent.change(screen.getByLabelText('Amount'), {
+      target: { value: '-23' },
+    });
+
+    // blur amount
+    fireEvent.blur(screen.getByLabelText('Amount'));
+
+    // input should have the formatted value after blurring
+    expect(screen.getByLabelText('Amount')).toHaveAttribute('value', '-23.00');
+  });
+
   // The original currency (EUR) uses 2 fraction digits, whereas the
   // next currency (KWD) uses 3 fraction digits.
   // We expect the last fraction to get added when changing the value

packages/components/inputs/money-input/src/money-input.tsx

@@ -283,7 +283,7 @@ export const parseRawAmountToNumber = (rawAmount: string, locale: string) => {
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
   const normalizedAmount = String(rawAmount)
-    .replace(new RegExp(`[^0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
+    .replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
     .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return parseFloat(normalizedAmount);