@carbon/react 1.97.0 → 1.99.0-rc.0

package/lib/components/Select/Select.js

@@ -18,12 +18,12 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var useId = require('../../internal/useId.js');
 var events = require('../../tools/events.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 
 const Select = /*#__PURE__*/React.forwardRef(({
   className,
@@ -53,7 +53,6 @@ const Select = /*#__PURE__*/React.forwardRef(({
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
-  const selectInstanceId = useId.useId();
   // Convert children to an array of valid elements once using type narrowing
   const validChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 
@@ -65,55 +64,50 @@ const Select = /*#__PURE__*/React.forwardRef(({
   // otherwise, fallback to the first option's text
   const initialTitle = other?.title || selectedOption?.props?.text || validChildren[0]?.props?.text || '';
   const [title, setTitle] = React.useState(initialTitle);
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   const selectClasses = cx({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
     [`${prefix}--select--light`]: light,
-    [`${prefix}--select--invalid`]: invalid,
-    [`${prefix}--select--disabled`]: disabled,
+    [`${prefix}--select--invalid`]: normalizedProps.invalid,
+    [`${prefix}--select--disabled`]: normalizedProps.disabled,
     [`${prefix}--select--readonly`]: readOnly,
-    [`${prefix}--select--warning`]: warn,
-    [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--select--warning`]: normalizedProps.warn,
+    [`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--select--slug`]: slug,
     [`${prefix}--select--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled
+    [`${prefix}--label--disabled`]: normalizedProps.disabled
   });
   const inputClasses = cx({
     [`${prefix}--select-input`]: true,
     [`${prefix}--select-input--${size}`]: size
   });
-  const errorId = `${id}-error-msg`;
-  const errorText = (() => {
-    if (invalid) {
-      return invalidText;
-    }
-    if (warn) {
-      return warnText;
-    }
-  })();
-  const error = invalid || warn ? /*#__PURE__*/React.createElement(Text.Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`,
-    id: errorId
-  }, errorText) : null;
+  const error = normalizedProps.validation;
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
-  const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
-    id: helperId,
+    id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
   const ariaProps = {};
-  if (invalid) {
-    ariaProps['aria-describedby'] = errorId;
+  if (normalizedProps.invalid) {
+    ariaProps['aria-describedby'] = normalizedProps.invalidId;
   } else if (!inline && !isFluid) {
-    ariaProps['aria-describedby'] = helper ? helperId : undefined;
+    ariaProps['aria-describedby'] = helper ? normalizedProps.helperId : undefined;
   }
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
@@ -150,8 +144,8 @@ const Select = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _rollupPluginBabelHelpers.extends({}, other, ariaProps, {
       id: id,
       className: inputClasses,
-      disabled: disabled || undefined,
-      "aria-invalid": invalid || undefined,
+      disabled: normalizedProps.disabled || undefined,
+      "aria-invalid": normalizedProps.invalid || undefined,
       "aria-readonly": readOnly || undefined,
       title: title,
       onChange: events.composeEventHandlers([onChange, handleChange])
@@ -159,9 +153,9 @@ const Select = /*#__PURE__*/React.forwardRef(({
       ref: ref
     }), children), /*#__PURE__*/React.createElement(iconsReact.ChevronDown, {
       className: `${prefix}--select__arrow`
-    }), invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+    }), normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
       className: `${prefix}--select__invalid-icon`
-    }), !invalid && warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+    }), !normalizedProps.invalid && normalizedProps.warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
       className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
     }));
   })();
@@ -177,10 +171,10 @@ const Select = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--select-input--inline__wrapper`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null
+    "data-invalid": normalizedProps.invalid || null
   }, input), error), !inline && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null,
+    "data-invalid": normalizedProps.invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
   }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {

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/lib/components/Toggletip/index.d.ts

@@ -111,3 +111,4 @@ export declare namespace ToggletipActions {
         className: PropTypes.Requireable<string>;
     };
 }
+export default Toggletip;

package/lib/components/Toggletip/index.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
@@ -289,3 +291,4 @@ exports.ToggletipActions = ToggletipActions;
 exports.ToggletipButton = ToggletipButton;
 exports.ToggletipContent = ToggletipContent;
 exports.ToggletipLabel = ToggletipLabel;
+exports.default = Toggletip;

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { DefinitionTooltip } from './DefinitionTooltip';
+import { DefinitionTooltip, type DefinitionTooltipProps } from './DefinitionTooltip';
 import { Tooltip, type TooltipProps } from './Tooltip';
-export { DefinitionTooltip, Tooltip, type TooltipProps };
+export { DefinitionTooltip, Tooltip, type DefinitionTooltipProps, type TooltipProps, };
+export default Tooltip;

package/lib/internal/FloatingMenu.js

@@ -10,7 +10,6 @@
 var React = require('react');
 var FeatureFlags = require('@carbon/feature-flags');
 var ReactDOM = require('react-dom');
-var window = require('window-or-global');
 var keys = require('./keyboard/keys.js');
 var match = require('./keyboard/match.js');
 var navigation = require('./keyboard/navigation.js');
@@ -130,14 +129,16 @@ const FloatingMenu = ({
     const menuSize = menuBody.getBoundingClientRect();
     const refPosition = triggerEl ? triggerEl.getBoundingClientRect() : undefined;
     const offsetValue = typeof menuOffset === 'function' ? menuOffset(menuBody, menuDirection, triggerEl, flipped) : menuOffset;
+    const scrollX = globalThis.scrollX ?? 0;
+    const scrollY = globalThis.scrollY ?? 0;
     if (updateOrientation) {
       updateOrientation({
         menuSize,
         refPosition,
         direction: menuDirection,
         offset: offsetValue,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position
@@ -157,8 +158,8 @@ const FloatingMenu = ({
         },
         offset: offsetValue,
         direction: menuDirection,
-        scrollX: window.pageXOffset,
-        scrollY: window.pageYOffset,
+        scrollX,
+        scrollY,
         container: {
           rect: target().getBoundingClientRect(),
           position: getComputedStyle(target()).position

package/lib/internal/OptimizedResize.js

@@ -7,9 +7,8 @@
 
 'use strict';
 
-var window = require('window-or-global');
-
-// mdn resize function
+// Use `globalThis` for universal access to global object (browser, workers, Node).
+const win = globalThis;
 
 /**
  * A callback function to be executed on `resize`.
@@ -27,7 +26,7 @@ const OptimizedResize = (() => {
   const handleResize = () => {
     if (!running) {
       running = true;
-      window.requestAnimationFrame(runCallbacks);
+      win.requestAnimationFrame(runCallbacks);
     }
   };
   const addCallback = callback => {
@@ -40,7 +39,7 @@ const OptimizedResize = (() => {
     /** Adds a callback function to be executed on window `resize`. */
     add: callback => {
       if (!callbacks.length) {
-        window.addEventListener('resize', handleResize);
+        win.addEventListener('resize', handleResize);
       }
       addCallback(callback);
       return {

package/lib/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.97.0",
+  "version": "1.99.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/icons-react": "^11.71.0",
-    "@carbon/layout": "^11.44.0",
-    "@carbon/styles": "^1.96.0",
-    "@carbon/utilities": "^0.13.0",
+    "@carbon/icons-react": "^11.73.0-rc.0",
+    "@carbon/layout": "^11.46.0-rc.0",
+    "@carbon/styles": "^1.98.0-rc.0",
+    "@carbon/utilities": "^0.14.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -67,8 +67,7 @@
     "invariant": "^2.2.3",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.2",
-    "tabbable": "^6.2.0",
-    "window-or-global": "^1.0.1"
+    "tabbable": "^6.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.3",
@@ -79,39 +78,34 @@
     "@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.64.0",
+    "@carbon/test-utils": "^10.39.0-rc.0",
+    "@carbon/themes": "^11.66.0-rc.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-docs": "^9.0.5",
-    "@storybook/addon-links": "^9.0.5",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.0.5",
+    "@storybook/addon-a11y": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-links": "^9.1.8",
+    "@storybook/builder-vite": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1",
-    "autoprefixer": "^10.4.0",
-    "babel-loader": "^10.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.8.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^4.0.0",
-    "css-loader": "^7.0.0",
     "enquirer": "^2.3.6",
     "fast-glob": "^3.3.3",
     "fs-extra": "^11.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.5.6",
-    "postcss-loader": "^8.1.1",
     "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",
@@ -119,14 +113,12 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.93.2",
-    "sass-loader": "^16.0.0",
-    "storybook": "^9.0.5",
+    "storybook": "^9.1.8",
+    "storybook-addon-accessibility-checker": ">=9.2.0-rc.3",
     "stream-browserify": "^3.0.0",
-    "style-loader": "^4.0.0",
-    "typescript-config-carbon": "^0.8.0",
+    "typescript-config-carbon": "^0.9.0",
     "use-sync-external-store": "^1.5.0",
-    "webpack": "^5.65.0",
-    "webpack-dev-server": "^5.0.0"
+    "vite": "^7.1.2"
   },
   "sideEffects": [
     "es/index.js",
@@ -139,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
+  "gitHead": "8263c72357fc43c00e66c9030698f759ef7977ce"
 }

package/telemetry.yml

@@ -138,6 +138,7 @@ collect:
         - lowContrast
         - max
         - maxCount
+        - maxFileSize
         - menuAlignment
         - menuOffset
         - menuOffsetFlip
@@ -271,6 +272,7 @@ collect:
         # AspectRatio
         - ratio
         # ButtonSet
+        - fluid
         - stacked
         # ChatButton
         - isQuickAction
@@ -463,6 +465,7 @@ collect:
         - notificationType
         # NumberInput
         - hideSteppers
+        - onStepperBlur
         - stepStartValue
         - validate
         # OrderedList