@carbon/react 1.94.1 → 1.94.2

package/es/components/NumberInput/NumberInput.js

@@ -39,6 +39,69 @@ const defaultTranslations = {
 const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
 };
+const getSeparators = locale => {
+  const numberWithGroupAndDecimal = 1234567.89;
+  const formatted = new Intl.NumberFormat(locale).format(numberWithGroupAndDecimal);
+
+  // Extract separators using regex
+  const match = formatted.match(/(\D+)\d{3}(\D+)\d{2}$/);
+  if (match) {
+    const groupSeparator = match[1];
+    const decimalSeparator = match[2];
+    return {
+      groupSeparator,
+      decimalSeparator
+    };
+  } else {
+    return {
+      groupSeparator: null,
+      decimalSeparator: null
+    };
+  }
+};
+const validateNumberSeparators = (input, locale) => {
+  // allow empty string
+  if (input === '' || Number.isNaN(input)) {
+    return true;
+  }
+  const {
+    groupSeparator,
+    decimalSeparator
+  } = getSeparators(locale);
+  if (!decimalSeparator) {
+    return !isNaN(Number(input));
+  }
+  const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  let group = '';
+  if (groupSeparator) {
+    if (groupSeparator.trim() === '') {
+      group = '[\\u00A0\\u202F\\s]'; // handle NBSP, narrow NBSP, space
+    } else {
+      group = esc(groupSeparator);
+    }
+  }
+  const decimal = esc(decimalSeparator);
+
+  // Regex for:
+  // - integers (with/without grouping)
+  // - optional decimal with 0+ digits after separator
+  const regex = new RegExp(`^-?\\d{1,3}(${group}\\d{3})*(${decimal}\\d*)?$|^-?\\d+(${decimal}\\d*)?$`);
+  if (!regex.test(input)) {
+    return false;
+  }
+
+  // Normalize
+  let normalized = input;
+  if (groupSeparator) {
+    if (groupSeparator.trim() === '') {
+      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
+    } else {
+      normalized = normalized?.split(groupSeparator).join('');
+    }
+  }
+  normalized = normalized?.replace(decimalSeparator, '.');
+  return !isNaN(Number(normalized));
+};
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
@@ -726,4 +789,4 @@ function disableWheel(e) {
   e.preventDefault();
 }
 
-export { NumberInput };
+export { NumberInput, validateNumberSeparators };

package/es/components/NumberInput/index.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { default as NumberInputSkeleton } from './NumberInput.Skeleton';
-export { NumberInput, type NumberInputProps } from './NumberInput';
+export { NumberInput, validateNumberSeparators, type NumberInputProps, } from './NumberInput';

package/es/index.js

@@ -102,7 +102,7 @@ export { FilterableMultiSelect } from './components/MultiSelect/FilterableMultiS
 export { MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { ActionableNotification, Callout, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
-export { NumberInput } from './components/NumberInput/NumberInput.js';
+export { NumberInput, validateNumberSeparators } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';

package/lib/components/NumberInput/NumberInput.js

@@ -41,6 +41,69 @@ const defaultTranslations = {
 const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
 };
+const getSeparators = locale => {
+  const numberWithGroupAndDecimal = 1234567.89;
+  const formatted = new Intl.NumberFormat(locale).format(numberWithGroupAndDecimal);
+
+  // Extract separators using regex
+  const match = formatted.match(/(\D+)\d{3}(\D+)\d{2}$/);
+  if (match) {
+    const groupSeparator = match[1];
+    const decimalSeparator = match[2];
+    return {
+      groupSeparator,
+      decimalSeparator
+    };
+  } else {
+    return {
+      groupSeparator: null,
+      decimalSeparator: null
+    };
+  }
+};
+const validateNumberSeparators = (input, locale) => {
+  // allow empty string
+  if (input === '' || Number.isNaN(input)) {
+    return true;
+  }
+  const {
+    groupSeparator,
+    decimalSeparator
+  } = getSeparators(locale);
+  if (!decimalSeparator) {
+    return !isNaN(Number(input));
+  }
+  const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  let group = '';
+  if (groupSeparator) {
+    if (groupSeparator.trim() === '') {
+      group = '[\\u00A0\\u202F\\s]'; // handle NBSP, narrow NBSP, space
+    } else {
+      group = esc(groupSeparator);
+    }
+  }
+  const decimal = esc(decimalSeparator);
+
+  // Regex for:
+  // - integers (with/without grouping)
+  // - optional decimal with 0+ digits after separator
+  const regex = new RegExp(`^-?\\d{1,3}(${group}\\d{3})*(${decimal}\\d*)?$|^-?\\d+(${decimal}\\d*)?$`);
+  if (!regex.test(input)) {
+    return false;
+  }
+
+  // Normalize
+  let normalized = input;
+  if (groupSeparator) {
+    if (groupSeparator.trim() === '') {
+      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
+    } else {
+      normalized = normalized?.split(groupSeparator).join('');
+    }
+  }
+  normalized = normalized?.replace(decimalSeparator, '.');
+  return !isNaN(Number(normalized));
+};
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
@@ -729,3 +792,4 @@ function disableWheel(e) {
 }
 
 exports.NumberInput = NumberInput;
+exports.validateNumberSeparators = validateNumberSeparators;

package/lib/components/NumberInput/index.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { default as NumberInputSkeleton } from './NumberInput.Skeleton';
-export { NumberInput, type NumberInputProps } from './NumberInput';
+export { NumberInput, validateNumberSeparators, type NumberInputProps, } from './NumberInput';

package/lib/index.js

@@ -366,6 +366,7 @@ exports.StaticNotification = Notification.StaticNotification;
 exports.ToastNotification = Notification.ToastNotification;
 exports.NumberInputSkeleton = NumberInput_Skeleton.default;
 exports.NumberInput = NumberInput.NumberInput;
+exports.validateNumberSeparators = NumberInput.validateNumberSeparators;
 exports.OrderedList = OrderedList.default;
 exports.OverflowMenu = index$c.default;
 exports.OverflowMenuItem = OverflowMenuItem.default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.94.1",
+  "version": "1.94.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "a932119dba9a4fe9c73dbb88058e9e21c42f8486"
+  "gitHead": "28d42f04dad50ed299b0587f7a586a0b1780cebc"
 }