@carbon/react 1.98.0 → 1.99.0

package/lib/components/NumberInput/NumberInput.js

@@ -45,8 +45,41 @@ 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}$/);
+  // Comprehensive Unicode digit pattern that includes all common numeral systems
+  // supported by Intl.NumberFormat across different locales
+  const digitPattern = '[' + '\\u0030-\\u0039' +
+  // Western
+  '\\u0660-\\u0669' +
+  // Eastern Arabic
+  '\\u0966-\\u096F' +
+  // Devanagari
+  '\\u09E6-\\u09EF' +
+  // Bengali
+  '\\uFF10-\\uFF19' +
+  // Fullwidth Japanese ０-９
+  '一二三四五六七八九〇零' +
+  // Kanji digits
+  ']';
+
+  // Non-digit pattern that excludes ALL digit types (not just ASCII 0-9)
+  const nonDigitPattern = '[^' + '\\u0030-\\u0039' +
+  // Western
+  '\\u0660-\\u0669' +
+  // Eastern Arabic
+  '\\u0966-\\u096F' +
+  // Devanagari
+  '\\u09E6-\\u09EF' +
+  // Bengali
+  '\\uFF10-\\uFF19' +
+  // Fullwidth Japanese ０-９
+  '一二三四五六七八九〇零' +
+  // Kanji digits
+  ']+';
+
+  // Extract separators using regex that handles all numeral systems
+  // Use nonDigitPattern instead of \D+ to correctly identify separators
+  const regex = new RegExp(`(${nonDigitPattern})${digitPattern}{3}(${nonDigitPattern})${digitPattern}{2}$`);
+  const match = formatted.match(regex);
   if (match) {
     const groupSeparator = match[1];
     const decimalSeparator = match[2];
@@ -61,11 +94,116 @@ const getSeparators = locale => {
     };
   }
 };
+
+// Normalizes all Unicode minus variants to ASCII hyphen-minus (-)
+const normalizeMinus = value => value.replace(/[\u2212\u2012\u2013\u2014\uFE63\uFF0D]/g, '-');
+const normalizeNumericInput = value => value
+// Remove bidi / direction control characters (Arabic keyboards)
+.replace(/[\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069]/g, '')
+// Normalize Unicode minus variants to ASCII "-"
+.replace(/[\u2212\u2012\u2013\u2014\uFE63\uFF0D]/g, '-');
+/**
+ * Converts a string with any Unicode numeral system to a JavaScript number.
+ * Handles all numeral systems supported by Intl.NumberFormat.
+ *
+ * @param {string} input - The input string with numerals in any Unicode system
+ * @param {string} locale - The locale for parsing separators
+ * @returns {number} The parsed number, or NaN if invalid
+ */
+const parseNumberWithLocale = (input, locale) => {
+  // Handle empty, null, or undefined inputs
+  if (input === '' || input === undefined || input === null) {
+    return NaN;
+  }
+  input = normalizeNumericInput(input);
+  const {
+    groupSeparator,
+    decimalSeparator
+  } = getSeparators(locale);
+
+  // Kanji digit map
+  const kanjiMap = {
+    零: '0',
+    〇: '0',
+    一: '1',
+    二: '2',
+    三: '3',
+    四: '4',
+    五: '5',
+    六: '6',
+    七: '7',
+    八: '8',
+    九: '9'
+  };
+  const digitRanges = [{
+    start: 0x0030,
+    end: 0x0039,
+    base: 0x0030
+  }, {
+    start: 0x0660,
+    end: 0x0669,
+    base: 0x0660
+  }, {
+    start: 0x0966,
+    end: 0x096f,
+    base: 0x0966
+  }, {
+    start: 0x09e6,
+    end: 0x09ef,
+    base: 0x09e6
+  }, {
+    start: 0xff10,
+    end: 0xff19,
+    base: 0xff10
+  }];
+  let normalized = Array.from(input).map(char => {
+    // Preserve scientific notation characters
+    if (char === 'e' || char === 'E' || char === '+' || char === '-') {
+      return char;
+    }
+
+    // Check Kanji first
+    if (kanjiMap[char] !== undefined) {
+      return kanjiMap[char];
+    }
+    const code = char.charCodeAt(0);
+    for (const range of digitRanges) {
+      if (code >= range.start && code <= range.end) {
+        return String(code - range.start);
+      }
+    }
+    return char;
+  }).join('');
+
+  // Remove grouping separators
+  if (groupSeparator) {
+    if (groupSeparator?.trim() === '') {
+      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
+    } else {
+      if (decimalSeparator !== ',' && decimalSeparator !== '٬') {
+        normalized = normalized?.replace(/[,٬]/g, '');
+      }
+      if (groupSeparator !== ',' && groupSeparator !== '٬') {
+        const escaped = groupSeparator?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        normalized = normalized?.replace(new RegExp(escaped, 'g'), '');
+      }
+    }
+  }
+  normalized = normalized.replace(/٫/g, '.');
+  if (decimalSeparator && decimalSeparator !== '.' && decimalSeparator !== '٫') {
+    const escaped = decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    normalized = normalized.replace(new RegExp(escaped, 'g'), '.');
+  }
+  normalized = normalizeMinus(normalized);
+  return Number(normalized);
+};
 const validateNumberSeparators = (input, locale) => {
-  // allow empty string
-  if (input === '' || Number.isNaN(input)) {
+  if (input === '') {
     return true;
   }
+
+  // Normalize bidi marks + minus signs FIRST
+  input = normalizeNumericInput(input);
   const {
     groupSeparator,
     decimalSeparator
@@ -74,35 +212,54 @@ const validateNumberSeparators = (input, locale) => {
     return !isNaN(Number(input));
   }
   const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const digit = '[' + '\\u0030-\\u0039' + '\\u0660-\\u0669' + '\\u0966-\\u096F' + '\\u09E6-\\u09EF' + '\\uFF10-\\uFF19' + '一二三四五六七八九〇零' + ']';
+
+  // Group separator regex
   let group = '';
   if (groupSeparator) {
-    if (groupSeparator.trim() === '') {
-      group = '[\\u00A0\\u202F\\s]'; // handle NBSP, narrow NBSP, space
+    if (groupSeparator?.trim() === '') {
+      group = '[\\u00A0\\u202F\\s]';
+    } else if (groupSeparator === ',' || groupSeparator === '٬') {
+      group = '[,٬]';
     } 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;
+  // Decimal separator regex
+  let decimal = esc(decimalSeparator);
+  if (decimalSeparator === '.' || decimalSeparator === '٫') {
+    decimal = '[.٫]';
   }
+  const sign = '[\\-\\u2212]?';
+  const scientific = `([eE][+-]?${digit}+)?`;
 
-  // Normalize
-  let normalized = input;
-  if (groupSeparator) {
-    if (groupSeparator.trim() === '') {
-      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
-    } else {
-      normalized = normalized?.split(groupSeparator).join('');
-    }
+  // Detect if grouping is used AT ALL
+  const usesGrouping = group && (groupSeparator?.trim() === '' ? /[\u00A0\u202F\s]/.test(input) : groupSeparator === ',' || groupSeparator === '٬' ? /[,٬]/.test(input) : groupSeparator ? input.includes(groupSeparator) : false);
+  const scientificMatch = input?.match(/^([^eE]+)([eE][+-]?.*)?$/);
+  const baseNumber = scientificMatch ? scientificMatch[1] : input;
+
+  // Split integer part from the base number - handle both decimal separator variants
+  let integerPart;
+  if (decimalSeparator === '.' || decimalSeparator === '٫') {
+    // Split by either . or ٫
+    integerPart = baseNumber?.split(/[.,]/)[0];
+  } else {
+    integerPart = baseNumber?.split(decimalSeparator)[0];
   }
-  normalized = normalized?.replace(decimalSeparator, '.');
-  return !isNaN(Number(normalized));
+
+  // STEP 1: strict integer validation
+  // When grouping is used, we need to handle two cases:
+  // 1. Numbers with 1-3 digits (no separator required): 1, 12, 123
+  // 2. Numbers with 4+ digits (separator required): 1,234 or 12,345 or 123,456
+  const integerRegex = usesGrouping ? new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}(${group}${digit}{3})+)$`) : new RegExp(`^${sign}${digit}+$`);
+  if (!integerRegex.test(integerPart)) {
+    return false;
+  }
+
+  // STEP 2: full number validation
+  const fullRegex = new RegExp(`^${sign}${digit}+` + (usesGrouping ? `(${group}${digit}{3})*` : '') + `(${decimal}${digit}+)?${scientific}$`);
+  return fullRegex.test(input);
 };
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
@@ -128,6 +285,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     max,
     min,
     onBlur,
+    onStepperBlur,
     onChange,
     onClick,
     onKeyUp,
@@ -293,8 +451,9 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     }
   };
   const outerElementClasses = cx(`${prefix}--form-item`, {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    [customClassName]: !!customClassName,
+    ...(customClassName ? {
+      [customClassName]: true
+    } : {}),
     [`${prefix}--number-input--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
@@ -428,6 +587,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
+      let parsedValueForBlur;
       if (type === 'text') {
         // When isControlled, the current inputValue needs re-parsed
         // because the consumer's onChange hasn't been called yet and
@@ -443,6 +603,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
+        parsedValueForBlur = parsedFormattedNewValue;
         if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
@@ -468,7 +629,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         }
       }
       if (onBlur) {
-        onBlur(e);
+        if (type === 'number') {
+          onBlur(e, value);
+          return;
+        }
+        const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+        onBlur(e, parsedTextValue);
       }
     },
     pattern: pattern,
@@ -488,7 +654,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'down'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -501,7 +667,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'up'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -612,10 +778,14 @@ NumberInput.propTypes = {
    */
   stepStartValue: PropTypes.number,
   /**
-   * Provide an optional handler that is called when the input or stepper
-   * buttons are blurred.
+   * Provide an optional handler that is called when the input is blurred.
    */
   onBlur: PropTypes.func,
+  /**
+   * Provide an optional handler that is called when the stepper
+   * buttons are blurred.
+   */
+  onStepperBlur: PropTypes.func,
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.
@@ -754,23 +924,33 @@ function getInputValidity({
   validate,
   locale
 }) {
-  if (typeof validate === 'function') {
-    const result = validate(value, locale);
-    if (result === false) {
-      return false; // immediate invalid
-    }
-    // If true or undefined, continue to further validations
-  }
   if (invalid) {
     return false;
   }
-  if (value === '') {
-    return allowEmpty;
+
+  // Skip validation if value is empty and allowEmpty
+  if (value === '') return allowEmpty;
+
+  // Normalize the value
+  let numericValue;
+  if (typeof value === 'string') {
+    numericValue = parseNumberWithLocale(value, locale); // safe: handles Arabic, Kanji, etc.
+  } else {
+    numericValue = value;
   }
-  if (value > max || value < min) {
-    return false;
+
+  // Use custom validate ONLY for formatting, not numeric comparison
+  if (validate && typeof value === 'string') {
+    const isFormatValid = validate(value, locale);
+    if (isFormatValid === false) {
+      return false; // invalid format
+    }
   }
-  return true;
+
+  // Check min/max bounds
+  if (max !== undefined && numericValue > max) return false;
+  if (min !== undefined && numericValue < min) return false;
+  return true; // valid
 }
 
 /**
@@ -792,4 +972,5 @@ function disableWheel(e) {
 }
 
 exports.NumberInput = NumberInput;
+exports.parseNumberWithLocale = parseNumberWithLocale;
 exports.validateNumberSeparators = validateNumberSeparators;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Popover/index.js

@@ -62,27 +62,41 @@ forwardRef) {
   const caretRef = React.useRef(null);
   const popover = React.useRef(null);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
+  const lastClickWasInsidePopoverContent = React.useRef(false);
   let align = mapPopoverAlign.mapPopoverAlign(initialAlign);
 
+  // Tracks clicks inside PopoverContent to prevent it from closing when clicked, this handles an edge
+  // case where the popover will close when clicking non-focusable elements (e.g. text)
+  useEvent.useEvent(popover, 'mousedown', event => {
+    const target = event.target;
+    lastClickWasInsidePopoverContent.current = refs.floating.current?.contains(target) || false;
+
+    // reset flag
+    if (lastClickWasInsidePopoverContent.current) {
+      setTimeout(() => {
+        lastClickWasInsidePopoverContent.current = false;
+      }, 0);
+    }
+  });
+
   // The `Popover` should close whenever it and its children loses focus
   useEvent.useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (isTabTip) {
-      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
-        onRequestClose?.();
-      }
-      return;
-    }
     if (!relatedTarget) {
+      // do not close if PopoverContent was clicked
+      if (lastClickWasInsidePopoverContent.current) {
+        lastClickWasInsidePopoverContent.current = false;
+        return;
+      }
       onRequestClose?.();
-      return;
-    }
-    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
-    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+    } else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+      const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+      const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 
-    // Only close if focus moved outside both containers
-    if (isOutsideMainContainer && isOutsideFloating) {
-      onRequestClose?.();
+      // Only close if focus moved outside both containers and not to an interactive parent wrapper
+      if (isOutsideFloating && !isFocusableWrapper) {
+        onRequestClose?.();
+      }
     }
   });
   useEvent.useWindowEvent('click', ({

package/lib/components/Tabs/Tabs.js

@@ -888,7 +888,7 @@ const Tab = /*#__PURE__*/React.forwardRef(({
     })
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    tabIndex: selectedIndex === index$1 && dismissable ? 0 : -1,
+    tabIndex: -1,
     "aria-disabled": disabled,
     "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     disabled: disabled,

package/lib/components/TextArea/TextArea.js

@@ -206,8 +206,10 @@ const TextArea = frFn((props, forwardRef) => {
   }, labelText) : null;
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
-    className: counterClasses
+    className: counterClasses,
+    "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
+  const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
@@ -238,8 +240,13 @@ const TextArea = frFn((props, forwardRef) => {
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
-  } else if (!invalid && !warn && !isFluid && helperText) {
-    ariaDescribedBy = helperId;
+  } else if (warn && !isFluid) {
+    ariaDescribedBy = warnId;
+  } else {
+    const ids = [];
+    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (counterDescriptionId) ids.push(counterDescriptionId);
+    ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
   if (enableCounter) {
     // handle different counter mode
@@ -296,7 +303,10 @@ const TextArea = frFn((props, forwardRef) => {
     className: formItemClasses
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
-  }, label, counter), /*#__PURE__*/React.createElement("div", {
+  }, label, counter), enableCounter && maxCount && /*#__PURE__*/React.createElement("span", {
+    id: counterDescriptionId,
+    className: `${prefix}--visually-hidden`
+  }, counterMode === 'word' ? `Word limit ${maxCount}` : `Character limit ${maxCount}`), /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null

package/lib/components/TextInput/PasswordInput.js

@@ -139,6 +139,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  const tooltipClasses = cx(`${prefix}--toggle-password-tooltip`, `${prefix}--icon-tooltip`);
   let align = undefined;
   if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
     if (tooltipAlignment === 'center') {
@@ -176,12 +177,12 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--text-input__divider`
   }), /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
     align: align,
-    className: `${prefix}--toggle-password-tooltip`,
+    className: tooltipClasses,
     label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     onClick: handleTogglePasswordVisibility
   }, passwordVisibilityIcon)));
   React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.98.0",
+  "version": "1.99.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/icons-react": "^11.72.0",
-    "@carbon/layout": "^11.45.0",
-    "@carbon/styles": "^1.97.0",
+    "@carbon/icons-react": "^11.73.0",
+    "@carbon/layout": "^11.46.0",
+    "@carbon/styles": "^1.98.0",
     "@carbon/utilities": "^0.14.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -67,7 +67,6 @@
     "invariant": "^2.2.3",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.2",
-    "storybook-addon-accessibility-checker": "^9.2.0-rc.3",
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
@@ -79,8 +78,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@carbon/test-utils": "^10.38.0",
-    "@carbon/themes": "^11.65.0",
+    "@carbon/test-utils": "^10.39.0",
+    "@carbon/themes": "^11.66.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -105,8 +104,8 @@
     "fs-extra": "^11.0.0",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-is": "^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
@@ -132,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "57fdbc7bfad9349b5c4359c7d621e709cd4daa25"
+  "gitHead": "ce7846aab8a3a1afe9b03d2d07d267af6cdb6ac2"
 }

package/telemetry.yml

@@ -465,6 +465,7 @@ collect:
         - notificationType
         # NumberInput
         - hideSteppers
+        - onStepperBlur
         - stepStartValue
         - validate
         # OrderedList