@carbon/react 1.94.1 → 1.95.0-rc.0

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/components/PaginationNav/PaginationNav.js

@@ -278,9 +278,7 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.extends({
     className: classNames,
     ref: ref
-  }, rest, {
-    "aria-label": "pagination"
-  }), /*#__PURE__*/React.createElement("ul", {
+  }, rest), /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--pagination-nav__list`
   }, /*#__PURE__*/React.createElement(DirectionButton, {
     direction: "backward",

package/lib/components/Slider/Slider.js

@@ -22,6 +22,7 @@ require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var SliderHandles = require('./SliderHandles.js');
 var clamp = require('../../internal/clamp.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var throttle = require('../../node_modules/es-toolkit/dist/compat/function/throttle.js');
 
 const ThumbWrapper = ({
@@ -75,6 +76,7 @@ var HandlePosition = /*#__PURE__*/function (HandlePosition) {
   return HandlePosition;
 }(HandlePosition || {}); // TODO: Delete this type and directory type the properties in the function.
 const Slider = props => {
+  var _Fragment, _Fragment2, _Fragment3, _Fragment4;
   // TODO: Move destructured `props` from the IIFE to here.
 
   const initialState = {
@@ -928,63 +930,77 @@ const Slider = props => {
       setState(derivedState);
     }
   }, [props.invalid]);
+  const {
+    ariaLabelInput,
+    unstable_ariaLabelInputUpper: ariaLabelInputUpper,
+    className,
+    hideTextInput = false,
+    id = inputIdRef.current = inputIdRef.current ||
+    // TODO:
+    // 1. Why isn't `inputId` just set to this value instead of an empty
+    //    string?
+    // 2. Why this value instead of something else, like
+    //    `crypto.randomUUID()` or `useId()`?
+    `__carbon-slider_${Math.random().toString(36).substr(2)}`,
+    min,
+    minLabel,
+    max,
+    maxLabel,
+    formatLabel = defaultFormatLabel,
+    labelText,
+    hideLabel,
+    step = 1,
+    // TODO: Other properties are deleted below. Why isn't this one?
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
+    stepMultiplier: _stepMultiplier,
+    inputType = 'number',
+    invalidText,
+    required,
+    disabled = false,
+    name,
+    unstable_nameUpper: nameUpper,
+    light,
+    readOnly = false,
+    warn = false,
+    warnText,
+    translateWithId: t = defaultTranslateWithId,
+    ...other
+  } = props;
+  const {
+    value,
+    valueUpper,
+    isValid,
+    isValidUpper,
+    correctedValue,
+    correctedPosition,
+    isRtl
+  } = state;
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid: !isValid,
+    warn
+  });
+  const normalizedUpperProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid: !isValidUpper,
+    warn
+  });
 
   // TODO: Delete this IIFE. It was added to maintain whitespace and to make it clear
   // what exactly has changed.
-  return ((_Fragment, _Fragment2, _Fragment3, _Fragment4) => {
-    const {
-      ariaLabelInput,
-      unstable_ariaLabelInputUpper: ariaLabelInputUpper,
-      className,
-      hideTextInput = false,
-      id = inputIdRef.current = inputIdRef.current ||
-      // TODO:
-      // 1. Why isn't `inputId` just set to this value instead of an empty
-      //    string?
-      // 2. Why this value instead of something else, like
-      //    `crypto.randomUUID()` or `useId()`?
-      `__carbon-slider_${Math.random().toString(36).substr(2)}`,
-      min,
-      minLabel,
-      max,
-      maxLabel,
-      formatLabel = defaultFormatLabel,
-      labelText,
-      hideLabel,
-      step = 1,
-      // TODO: Other properties are deleted below. Why isn't this one?
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-      stepMultiplier: _stepMultiplier,
-      inputType = 'number',
-      invalidText,
-      required,
-      disabled = false,
-      name,
-      unstable_nameUpper: nameUpper,
-      light,
-      readOnly = false,
-      warn,
-      warnText,
-      translateWithId: t = defaultTranslateWithId,
-      ...other
-    } = props;
+  return (() => {
     delete other.onRelease;
     delete other.invalid;
     delete other.unstable_valueUpper;
-    const {
-      value,
-      valueUpper,
-      isValid,
-      isValidUpper,
-      correctedValue,
-      correctedPosition,
-      isRtl
-    } = state;
-    const showWarning = !readOnly && warn ||
+    const showWarning = normalizedProps.warn ||
     // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
     // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
     typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
-    const showWarningUpper = !readOnly && warn ||
+    const showWarningUpper = normalizedUpperProps.warn ||
     // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
     // eslint-disable-next-line valid-typeof, no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
     typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
@@ -1009,11 +1025,11 @@ const Slider = props => {
         [`${prefix}--text-input--light`]: light
       };
       const lowerInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
-        [`${prefix}--text-input--invalid`]: !readOnly && !isValid,
+        [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
         [`${prefix}--slider-text-input--warn`]: showWarning
       }]);
       const upperInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--upper`, conditionalInputClasses, {
-        [`${prefix}--text-input--invalid`]: !readOnly && (twoHandles ? !isValidUpper : !isValid),
+        [`${prefix}--text-input--invalid`]: twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid,
         [`${prefix}--slider-text-input--warn`]: showWarningUpper
       }]);
       const lowerInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--lower`, {
@@ -1073,11 +1089,11 @@ const Slider = props => {
         onBlur: onBlurInput,
         onKeyUp: props.onInputKeyUp,
         onKeyDown: onInputKeyDown,
-        "data-invalid": !isValid && !readOnly ? true : null,
+        "data-invalid": normalizedProps.invalid ? true : null,
         "data-handle-position": HandlePosition.LOWER,
-        "aria-invalid": !isValid && !readOnly ? true : undefined,
+        "aria-invalid": normalizedProps.invalid ? true : undefined,
         readOnly: readOnly
-      }), !readOnly && !isValid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+      }), normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
         className: `${prefix}--slider__invalid-icon`
       }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
         className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
@@ -1093,7 +1109,7 @@ const Slider = props => {
         onKeyDown: onKeyDown,
         role: "presentation",
         tabIndex: -1,
-        "data-invalid": (twoHandles ? !isValid || !isValidUpper : !isValid) && !readOnly ? true : null
+        "data-invalid": (twoHandles ? normalizedProps.invalid || normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null
       }, other), /*#__PURE__*/React.createElement(ThumbWrapper, _rollupPluginBabelHelpers.extends({
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
@@ -1176,18 +1192,18 @@ const Slider = props => {
         onBlur: onBlurInput,
         onKeyDown: onInputKeyDown,
         onKeyUp: props.onInputKeyUp,
-        "data-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : null,
+        "data-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
         "data-handle-position": twoHandles ? HandlePosition.UPPER : null,
-        "aria-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : undefined,
+        "aria-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : undefined,
         readOnly: readOnly
-      }), !readOnly && (twoHandles ? !isValidUpper : !isValid) && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+      }), (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
         className: `${prefix}--slider__invalid-icon`
       }), showWarningUpper && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
         className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
-      }))), !readOnly && (!isValid || !isValidUpper) && /*#__PURE__*/React.createElement(Text.Text, {
+      }))), (normalizedProps.invalid || normalizedUpperProps.invalid) && /*#__PURE__*/React.createElement(Text.Text, {
         as: "div",
         className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
-      }, invalidText), !readOnly && warn && isValid && isValidUpper && /*#__PURE__*/React.createElement(Text.Text, {
+      }, invalidText), (normalizedProps.warn || normalizedUpperProps.warn) && /*#__PURE__*/React.createElement(Text.Text, {
         as: "div",
         className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
       }, warnText), correctedValue && /*#__PURE__*/React.createElement(Text.Text, {

package/lib/components/Text/Text.js

@@ -64,7 +64,7 @@ Text.propTypes = {
   /**
    * Provide child elements or text to be rendered inside of this component
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Specify the text direction to be used for this component and any of its
    * children

package/lib/components/Tile/Tile.js

@@ -495,7 +495,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     });
     resizeObserver.observe(aboveTheFold.current);
     return () => resizeObserver.disconnect();
-  }, []);
+  }, [isTileMaxHeight, isTilePadding]);
   const belowTheFoldId = useId.useId('expandable-tile-interactive');
 
   // AILabel is always size `xs`

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/lib/internal/useNormalizedInputProps.js

@@ -34,9 +34,9 @@ const useNormalizedInputProps = ({
   const prefix = usePrefix.usePrefix();
   const normalizedProps = {
     disabled: !readOnly && disabled,
-    invalid: !readOnly && invalid,
+    invalid: !readOnly && !disabled && invalid,
     invalidId: `${id}-error-msg`,
-    warn: !readOnly && !invalid && warn,
+    warn: !readOnly && !invalid && !disabled && warn,
     warnId: `${id}-warn-msg`,
     validation: null,
     icon: null,

package/lib/prop-types/deprecateComponent.d.ts

@@ -1 +1,7 @@
-export default function deprecateComponent(componentName: any, message: any): any;
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const deprecateComponent: (componentName: string, message?: string) => string | undefined;

package/lib/prop-types/deprecateComponent.js

@@ -7,17 +7,15 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var warning = require('../internal/warning.js');
 
 const didWarnAboutDeprecation = {};
-function deprecateComponent(componentName, message) {
+const deprecateComponent = (componentName, message) => {
   if (!didWarnAboutDeprecation[componentName]) {
     didWarnAboutDeprecation[componentName] = true;
     process.env.NODE_ENV !== "production" ? warning.warning(false, message) : void 0;
   }
   return componentName;
-}
+};
 
-exports.default = deprecateComponent;
+exports.deprecateComponent = deprecateComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.94.1",
+  "version": "1.95.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,7 +55,7 @@
     "@carbon/feature-flags": "0.32.0",
     "@carbon/icons-react": "^11.70.0",
     "@carbon/layout": "^11.43.0",
-    "@carbon/styles": "^1.93.1",
+    "@carbon/styles": "^1.94.0-rc.0",
     "@carbon/utilities": "^0.12.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -118,7 +118,7 @@
     "rollup": "^4.41.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.77.7",
+    "sass": "^1.93.2",
     "sass-loader": "^16.0.0",
     "storybook": "^9.0.5",
     "stream-browserify": "^3.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "a932119dba9a4fe9c73dbb88058e9e21c42f8486"
+  "gitHead": "ba9072cd72b1d664f26a3c984e2f7d694280175b"
 }

package/telemetry.yml

@@ -27,6 +27,7 @@ collect:
         - as
         - autoAlign
         - autoComplete
+        - backgroundToken
         - border
         - buttonKind
         - caption
@@ -422,6 +423,9 @@ collect:
         - legacyAutoalign
         - x
         - y
+        # MenuButton
+        - menuBackgroundToken
+        - menuBorder
         # MenuItem
         - shortcut
         # MenuItemRadioGroup
@@ -506,7 +510,6 @@ collect:
         # Popover
         - alignmentAxisOffset
         - autoAlignBoundary
-        - backgroundToken
         - caret
         - isTabTip
         # ProgressIndicator
@@ -668,6 +671,9 @@ collect:
         - step
         - time
         - "true"
+        # General - backgroundToken
+        - background
+        - layer
         # General - buttonKind
         - danger
         - danger--ghost
@@ -924,6 +930,9 @@ collect:
         - complete
         - edit
         - uploading
+        # MenuButton - menuBackgroundToken
+        - background
+        - layer
         # ModalWrapper - triggerButtonKind
         - danger
         - danger--ghost
@@ -939,9 +948,6 @@ collect:
         - toast
         # Popover - autoAlignBoundary
         - clippingAncestors
-        # Popover - backgroundToken
-        - background
-        - layer
         # ShapeIndicator - textSize
         - "12"
         - "14"