NumberParser Percent and SigFig fixes (#5156)

snowystinger · web-flow · commit 4cb6dd3918a2 · 2023-10-11T00:17:14.000Z
diff --git a/packages/@internationalized/number/src/NumberParser.ts b/packages/@internationalized/number/src/NumberParser.ts
@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {NumberFormatter} from './NumberFormatter';
+
 interface Symbols {
   minusSign: string,
   plusSign: string,
@@ -102,11 +104,16 @@ class NumberParserImpl {
   formatter: Intl.NumberFormat;
   options: Intl.ResolvedNumberFormatOptions;
   symbols: Symbols;
+  locale: string;
 
   constructor(locale: string, options: Intl.NumberFormatOptions = {}) {
+    this.locale = locale;
     this.formatter = new Intl.NumberFormat(locale, options);
     this.options = this.formatter.resolvedOptions();
-    this.symbols = getSymbols(this.formatter, this.options, options);
+    this.symbols = getSymbols(locale, this.formatter, this.options, options);
+    if (this.options.style === 'percent' && ((this.options.minimumFractionDigits ?? 0) > 18 || (this.options.maximumFractionDigits ?? 0) > 18)) {
+      console.warn('NumberParser cannot handle percentages with greater than 18 decimal places, please reduce the number in your options.');
+    }
   }
 
   parse(value: string) {
@@ -119,23 +126,50 @@ class NumberParserImpl {
       .replace(this.symbols.minusSign, '-')
       .replace(this.symbols.numeral, this.symbols.index);
 
+    if (this.options.style === 'percent') {
+      // javascript is bad at dividing by 100 and maintaining the same significant figures, so perform it on the string before parsing
+      let isNegative = fullySanitizedValue.indexOf('-');
+      fullySanitizedValue = fullySanitizedValue.replace('-', '');
+      let index = fullySanitizedValue.indexOf('.');
+      if (index === -1) {
+        index = fullySanitizedValue.length;
+      }
+      fullySanitizedValue = fullySanitizedValue.replace('.', '');
+      if (index - 2 === 0) {
+        fullySanitizedValue = `0.${fullySanitizedValue}`;
+      } else if (index - 2 === -1) {
+        fullySanitizedValue = `0.0${fullySanitizedValue}`;
+      } else if (index - 2 === -2) {
+        fullySanitizedValue = '0.00';
+      } else {
+        fullySanitizedValue = `${fullySanitizedValue.slice(0, index - 2)}.${fullySanitizedValue.slice(index - 2)}`;
+      }
+      if (isNegative > -1) {
+        fullySanitizedValue = `-${fullySanitizedValue}`;
+      }
+    }
+
     let newValue = fullySanitizedValue ? +fullySanitizedValue : NaN;
     if (isNaN(newValue)) {
       return NaN;
     }
 
+    if (this.options.style === 'percent') {
+      // extra step for rounding percents to what our formatter would output
+      let options = {
+        ...this.options,
+        style: 'decimal',
+        minimumFractionDigits: Math.min(this.options.minimumFractionDigits + 2, 20),
+        maximumFractionDigits: Math.min(this.options.maximumFractionDigits + 2, 20)
+      };
+      return (new NumberParser(this.locale, options)).parse(new NumberFormatter(this.locale, options).format(newValue));
+    }
+
     // accounting will always be stripped to a positive number, so if it's accounting and has a () around everything, then we need to make it negative again
     if (this.options.currencySign === 'accounting' && CURRENCY_SIGN_REGEX.test(value)) {
       newValue = -1 * newValue;
     }
 
-    // when reading the number, if it's a percent, then it should be interpreted as being divided by 100
-    if (this.options.style === 'percent') {
-      newValue /= 100;
-      // after dividing to get the percent value, javascript may get .0210999999 instead of .0211, so fix the number of fraction digits
-      newValue = +newValue.toFixed((this.options.maximumFractionDigits ?? 0) + 2);
-    }
-
     return newValue;
   }
 
@@ -179,6 +213,11 @@ class NumberParserImpl {
       return false;
     }
 
+    // Numbers that can't have any decimal values fail if a decimal character is typed
+    if (value.indexOf(this.symbols.decimal) > -1 && this.options.maximumFractionDigits === 0) {
+      return false;
+    }
+
     // Remove numerals, groups, and decimals
     value = replaceAll(value, this.symbols.group, '')
       .replace(this.symbols.numeral, '')
@@ -198,11 +237,13 @@ const pluralNumbers = [
   0, 4, 2, 1, 11, 20, 3, 7, 100, 21, 0.1, 1.1
 ];
 
-function getSymbols(formatter: Intl.NumberFormat, intlOptions: Intl.ResolvedNumberFormatOptions, originalOptions: Intl.NumberFormatOptions): Symbols {
+function getSymbols(locale: string, formatter: Intl.NumberFormat, intlOptions: Intl.ResolvedNumberFormatOptions, originalOptions: Intl.NumberFormatOptions): Symbols {
+  // formatter needs access to all decimal places in order to generate the correct literal strings for the plural set
+  let symbolFormatter = new Intl.NumberFormat(locale, {...intlOptions, minimumSignificantDigits: 1, maximumSignificantDigits: 21});
   // Note: some locale's don't add a group symbol until there is a ten thousands place
-  let allParts = formatter.formatToParts(-10000.111);
-  let posAllParts = formatter.formatToParts(10000.111);
-  let pluralParts = pluralNumbers.map(n => formatter.formatToParts(n));
+  let allParts = symbolFormatter.formatToParts(-10000.111);
+  let posAllParts = symbolFormatter.formatToParts(10000.111);
+  let pluralParts = pluralNumbers.map(n => symbolFormatter.formatToParts(n));
 
   let minusSign = allParts.find(p => p.type === 'minusSign')?.value ?? '-';
   let plusSign = posAllParts.find(p => p.type === 'plusSign')?.value;
@@ -214,7 +255,11 @@ function getSymbols(formatter: Intl.NumberFormat, intlOptions: Intl.ResolvedNumb
     plusSign = '+';
   }
 
-  let decimal = allParts.find(p => p.type === 'decimal')?.value;
+  // If maximumSignificantDigits is 1 (the minimum) then we won't get decimal characters out of the above formatters
+  // Percent also defaults to 0 fractionDigits, so we need to make a new one that isn't percent to get an accurate decimal
+  let decimalParts = new Intl.NumberFormat(locale, {...intlOptions, minimumFractionDigits: 2, maximumFractionDigits: 2}).formatToParts(0.001);
+
+  let decimal = decimalParts.find(p => p.type === 'decimal')?.value;
   let group = allParts.find(p => p.type === 'group')?.value;
 
   // this set is also for a regex, it's all literals that might be in the string we want to eventually parse that
@@ -223,7 +268,7 @@ function getSymbols(formatter: Intl.NumberFormat, intlOptions: Intl.ResolvedNumb
   let pluralPartsLiterals = pluralParts.flatMap(p => p.filter(p => !nonLiteralParts.has(p.type)).map(p => escapeRegex(p.value)));
   let sortedLiterals = [...new Set([...allPartsLiterals, ...pluralPartsLiterals])].sort((a, b) => b.length - a.length);
 
-  let literals = sortedLiterals.length === 0 ? 
+  let literals = sortedLiterals.length === 0 ?
       new RegExp('[\\p{White_Space}]', 'gu') :
       new RegExp(`${sortedLiterals.join('|')}|[\\p{White_Space}]`, 'gu');
 
@@ -247,5 +292,5 @@ function replaceAll(str: string, find: string, replace: string) {
 }
 
 function escapeRegex(string: string) {
-  return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
diff --git a/packages/@internationalized/number/test/NumberParser.test.js b/packages/@internationalized/number/test/NumberParser.test.js
@@ -10,8 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import fc from 'fast-check';
+import messages from '../../../@react-aria/numberfield/intl/*';
 import {NumberParser} from '../src/NumberParser';
 
+// for some reason hu-HU isn't supported in jsdom/node
+let locales = Object.keys(messages).map(locale => locale.replace('.json', '')).filter(locale => locale !== 'hu-HU');
+
 describe('NumberParser', function () {
   describe('parse', function () {
     it('should support basic numbers', function () {
@@ -155,10 +160,117 @@ describe('NumberParser', function () {
       });
 
       it('should parse a percent with decimals', function () {
-        expect(new NumberParser('en-US', {style: 'percent'}).parse('10.5%')).toBe(0.1);
+        expect(new NumberParser('en-US', {style: 'percent'}).parse('10.5%')).toBe(0.11);
         expect(new NumberParser('en-US', {style: 'percent', minimumFractionDigits: 2}).parse('10.5%')).toBe(0.105);
       });
     });
+
+    describe('round trips', function () {
+      // Locales have to include: 'de-DE', 'ar-EG', 'fr-FR' and possibly others
+      // But for the moment they are not properly supported
+      const localesArb = fc.constantFrom(...locales);
+      const styleOptsArb = fc.oneof(
+        {withCrossShrink: true},
+        fc.record({style: fc.constant('decimal')}),
+        // 'percent' should be part of the possible options, but for the moment it fails for some tests
+        fc.record({style: fc.constant('percent')}),
+        fc.record(
+          {style: fc.constant('currency'), currency: fc.constantFrom('USD', 'EUR', 'CNY', 'JPY'), currencyDisplay: fc.constantFrom('symbol', 'code', 'name')},
+          {requiredKeys: ['style', 'currency']}
+        ),
+        fc.record(
+          {style: fc.constant('unit'), unit: fc.constantFrom('inch', 'liter', 'kilometer-per-hour')},
+          {requiredKeys: ['style', 'unit']}
+        )
+      );
+      const genericOptsArb = fc.record({
+        localeMatcher: fc.constantFrom('best fit', 'lookup'),
+        unitDisplay: fc.constantFrom('narrow', 'short', 'long'),
+        useGrouping: fc.boolean(),
+        minimumIntegerDigits: fc.integer({min: 1, max: 21}),
+        minimumFractionDigits: fc.integer({min: 0, max: 20}),
+        maximumFractionDigits: fc.integer({min: 0, max: 20}),
+        minimumSignificantDigits: fc.integer({min: 1, max: 21}),
+        maximumSignificantDigits: fc.integer({min: 1, max: 21})
+      }, {requiredKeys: []});
+
+      // We restricted the set of possible values to avoid unwanted overflows to infinity and underflows to zero
+      // and stay in the domain of legit values.
+      const DOUBLE_MIN = Number.EPSILON;
+      const valueArb = fc.tuple(
+        fc.constantFrom(1, -1),
+        fc.double({next: true, noNaN: true, min: DOUBLE_MIN, max: 1 / DOUBLE_MIN})
+      ).map(([sign, value]) => sign * value);
+
+      const inputsArb = fc.tuple(valueArb, localesArb, styleOptsArb, genericOptsArb)
+        .map(([d, locale, styleOpts, genericOpts]) => ({d, opts: {...styleOpts, ...genericOpts}, locale}))
+        .filter(({opts}) => opts.minimumFractionDigits === undefined || opts.maximumFractionDigits === undefined || opts.minimumFractionDigits <= opts.maximumFractionDigits)
+        .filter(({opts}) => opts.minimumSignificantDigits === undefined || opts.maximumSignificantDigits === undefined || opts.minimumSignificantDigits <= opts.maximumSignificantDigits)
+        .map(({d, opts, locale}) => {
+          if (opts.style === 'percent') {
+            opts.minimumFractionDigits = opts.minimumFractionDigits > 18 ? 18 : opts.minimumFractionDigits;
+            opts.maximumFractionDigits = opts.maximumFractionDigits > 18 ? 18 : opts.maximumFractionDigits;
+          }
+          return {d, opts, locale};
+        })
+        .map(({d, opts, locale}) => {
+          let adjustedNumberForFractions = d;
+          if (Math.abs(d) < 1 && opts.minimumFractionDigits && opts.minimumFractionDigits > 1) {
+            adjustedNumberForFractions = d * (10 ** (opts.minimumFractionDigits || 2));
+          } else if (Math.abs(d) > 1 && opts.minimumFractionDigits && opts.minimumFractionDigits > 1) {
+            adjustedNumberForFractions = d / (10 ** (opts.minimumFractionDigits || 2));
+          }
+          return {adjustedNumberForFractions, opts, locale};
+        });
+
+      // skipping until we can reliably run it, until then, it's good to run manually
+      // track counter examples below
+      it.skip('should fully reverse NumberFormat', function () {
+        fc.assert(
+          fc.property(
+            inputsArb,
+            function ({adjustedNumberForFractions, locale, opts}) {
+              const formatter = new Intl.NumberFormat(locale, opts);
+              const parser = new NumberParser(locale, opts);
+
+              const formattedOnce = formatter.format(adjustedNumberForFractions);
+              expect(formatter.format(parser.parse(formattedOnce))).toBe(formattedOnce);
+            }
+          )
+        );
+      });
+    });
+    describe('counter examples', () => {
+      it('can still get all plural literals with minimum significant digits', () => {
+        let locale = 'pl-PL';
+        let options = {
+          style: 'unit',
+          unit: 'inch',
+          minimumSignificantDigits: 4,
+          maximumSignificantDigits: 6
+        };
+        const formatter = new Intl.NumberFormat(locale, options);
+        const parser = new NumberParser(locale, options);
+
+        const formattedOnce = formatter.format(60048.95);
+        expect(formatter.format(parser.parse(formattedOnce))).toBe(formattedOnce);
+      });
+      // See Bug https://github.com/nodejs/node/issues/49919
+      it.skip('formatted units keep their number', () => {
+        let locale = 'da-DK';
+        let options = {
+          style: 'unit',
+          unit: 'kilometer-per-hour',
+          unitDisplay: 'long',
+          minimumSignificantDigits: 1
+        };
+        const formatter = new Intl.NumberFormat(locale, options);
+        const parser = new NumberParser(locale, options);
+
+        const formattedOnce = formatter.format(1);
+        expect(formatter.format(parser.parse(formattedOnce))).toBe(formattedOnce);
+      });
+    });
   });
 
   describe('isValidPartialNumber', function () {
