@carbon/react 1.106.0 → 1.107.0

package/lib/components/TextInput/TextInput.js

@@ -11,6 +11,7 @@ const require_Text = require("../Text/Text.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_index = require("../AILabel/index.js");
 const require_FormContext = require("../FluidForm/FormContext.js");
@@ -79,7 +80,7 @@ const TextInput = (0, react.forwardRef)(({ className, decorator, disabled = fals
 		title: placeholder,
 		disabled: normalizedProps.disabled,
 		readOnly,
-		["aria-describedby"]: helperText && normalizedProps.helperId,
+		["aria-describedby"]: require_hasHelperText.hasHelperText(helperText) && !normalizedProps.invalid ? normalizedProps.helperId : void 0,
 		...rest
 	};
 	if (enableCounter) sharedTextInputProps.maxLength = maxCount;
@@ -128,7 +129,7 @@ const TextInput = (0, react.forwardRef)(({ className, decorator, disabled = fals
 		className: `${prefix}--text-input__label-wrapper`,
 		children: [label, counter]
 	});
-	const helper = typeof helperText !== "undefined" && helperText !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+	const helper = require_hasHelperText.hasHelperText(helperText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 		as: "div",
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
@@ -167,34 +168,41 @@ const TextInput = (0, react.forwardRef)(({ className, decorator, disabled = fals
 	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index.AILabel) ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: inputWrapperClasses,
-		children: [!inline ? labelWrapper : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: `${prefix}--text-input__label-helper-wrapper`,
-			children: [labelWrapper, !isFluid && (normalizedProps.validation || helper)]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: fieldOuterWrapperClasses,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: fieldWrapperClasses,
-				"data-invalid": normalizedProps.invalid || null,
-				children: [
-					Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconClasses }),
-					input,
-					slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `${prefix}--text-input__field-inner-wrapper--decorator`,
-						children: normalizedDecorator
-					}) : "",
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `${prefix}--text-input__counter-alert`,
-						role: "alert",
-						"aria-live": "assertive",
-						"aria-atomic": "true",
-						ref: announcerRef,
-						children: ariaAnnouncement
-					}),
-					isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: `${prefix}--text-input__divider` }),
-					isFluid && !inline && normalizedProps.validation
-				]
-			}), !isFluid && !inline && (normalizedProps.validation || helper)]
-		})]
+		children: [
+			!inline ? labelWrapper : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: labelWrapper
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: fieldOuterWrapperClasses,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: fieldWrapperClasses,
+					"data-invalid": normalizedProps.invalid || null,
+					children: [
+						input,
+						Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconClasses }),
+						slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `${prefix}--text-input__field-inner-wrapper--decorator`,
+							children: normalizedDecorator
+						}) : "",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `${prefix}--text-input__counter-alert`,
+							role: "alert",
+							"aria-live": "assertive",
+							"aria-atomic": "true",
+							ref: announcerRef,
+							children: ariaAnnouncement
+						}),
+						isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: `${prefix}--text-input__divider` }),
+						isFluid && !inline && normalizedProps.validation
+					]
+				}), !isFluid && !inline && (normalizedProps.validation || helper)]
+			}),
+			inline && !isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: normalizedProps.validation || helper
+			})
+		]
 	});
 });
 TextInput.displayName = "TextInput";
@@ -218,6 +226,7 @@ TextInput.propTypes = {
 	placeholder: prop_types.default.string,
 	readOnly: prop_types.default.bool,
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/lib/components/TextInput/util.d.ts

@@ -17,5 +17,6 @@ export declare const getTextInputProps: ({ sharedTextInputProps, invalid, invali
     'aria-describedby'?: string | undefined;
     'data-invalid'?: boolean | undefined;
     'aria-invalid'?: boolean | undefined;
+    'aria-errormessage'?: string | undefined;
 };
 export {};

package/lib/components/TextInput/util.js

@@ -15,7 +15,7 @@
 const invalidProps = (invalidId) => ({
 	"data-invalid": true,
 	"aria-invalid": true,
-	"aria-describedby": invalidId
+	"aria-errormessage": invalidId
 });
 const warnProps = (warnId) => ({ "aria-describedby": warnId });
 const helperProps = (helperId) => ({ "aria-describedby": helperId });

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

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
  */
 import PropTypes from 'prop-types';
-import React, { ElementType } from 'react';
+import React, { type ElementType } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export interface GlobalThemeProps {
     theme?: 'white' | 'g10' | 'g90' | 'g100';

package/lib/components/Theme/index.js

@@ -18,7 +18,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Theme/index.tsx
 /**
-* Copyright IBM Corp. 2016, 2023
+* 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.
@@ -28,7 +28,7 @@ const GlobalTheme = react.default.forwardRef(({ children, theme }, ref) => {
 	const value = (0, react.useMemo)(() => {
 		return { theme };
 	}, [theme]);
-	const childrenWithProps = react.default.cloneElement(children, { ref });
+	const childrenWithProps = (0, react.isValidElement)(children) ? (0, react.cloneElement)(children, { ref }) : children;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
 		value,
 		children: childrenWithProps

package/lib/components/TimePicker/TimePicker.js

@@ -24,7 +24,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 */
 const TimePicker = (0, react.forwardRef)((props, ref) => {
-	const { children, className, inputClassName, pickerClassName, disabled = false, hideLabel, id, invalidText = "Error message goes here", invalid = false, warningText = "Warning message goes here", warning = false, labelText, light = false, maxLength = 5, onChange = () => {}, onClick = () => {}, onBlur = () => {}, pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?", placeholder = "hh:mm", readOnly, size = "md", type = "text", value, ...rest } = props;
+	const { ["aria-describedby"]: ariaDescribedBy, children, className, inputClassName, pickerClassName, disabled = false, hideLabel, id, invalidText = "Error message goes here", invalid = false, warningText = "Warning message goes here", warning = false, labelText, light = false, maxLength = 5, onChange = () => {}, onClick = () => {}, onBlur = () => {}, pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?", placeholder = "hh:mm", readOnly, size = "md", type = "text", value, ...rest } = props;
 	const prefix = require_usePrefix.usePrefix();
 	function handleOnClick(evt) {
 		if (!disabled) onClick(evt);
@@ -93,6 +93,7 @@ const TimePicker = (0, react.forwardRef)((props, ref) => {
 		});
 	}
 	const readOnlyProps = { readOnly };
+	const describedBy = [normalizedProps.invalid ? normalizedProps.invalidId : normalizedProps.warn ? normalizedProps.warnId : null, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, classnames.default)(`${prefix}--form-item`, className),
 		children: [
@@ -116,7 +117,9 @@ const TimePicker = (0, react.forwardRef)((props, ref) => {
 						type,
 						value,
 						...rest,
-						...readOnlyProps
+						...readOnlyProps,
+						"aria-describedby": describedBy,
+						"aria-invalid": normalizedProps.invalid ? true : void 0
 					}), (normalizedProps.invalid || normalizedProps.warn) && normalizedProps.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: `${prefix}--time-picker__error__icon`,
 						children: react.default.createElement(normalizedProps.icon, {

package/lib/components/TreeView/TreeNode.js

@@ -36,7 +36,7 @@ const extractTextContent = (node) => {
 	if (typeof node === "number") return String(node);
 	if (typeof node === "boolean") return String(node);
 	if (Array.isArray(node)) return node.map(extractTextContent).join("");
-	if (react.default.isValidElement(node)) {
+	if ((0, react.isValidElement)(node)) {
 		const children = node.props.children;
 		return extractTextContent(children);
 	}

package/lib/components/UIShell/HeaderGlobalBar.d.ts

@@ -7,5 +7,5 @@
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-declare const HeaderGlobalBar: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+declare const HeaderGlobalBar: (props: import("react").HTMLAttributes<"div">) => import("react").ReactElement;
 export default HeaderGlobalBar;

package/lib/components/UIShell/HeaderMenu.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/UIShell/HeaderMenu.js

@@ -10,9 +10,11 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
+const require_utils = require("../../internal/utils.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
 const require_events = require("../../tools/events.js");
 const require_AriaPropTypes = require("../../prop-types/AriaPropTypes.js");
+const require_HeaderMenuItem = require("./HeaderMenuItem.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -23,7 +25,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _carbon_icons_react = require("@carbon/icons-react");
 //#region src/components/UIShell/HeaderMenu.tsx
 /**
-* 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.
@@ -85,7 +87,7 @@ const HeaderMenu = frFn((props, ref) => {
 		}
 	};
 	const hasActiveDescendant = (childrenArg) => react.Children.toArray(childrenArg).some((child) => {
-		if (!(0, react.isValidElement)(child)) return false;
+		if (!require_utils.isComponentElement(child, require_HeaderMenuItem.default)) return false;
 		const { isActive, isCurrentPage, children } = child.props;
 		return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
 	});
@@ -96,7 +98,7 @@ const HeaderMenu = frFn((props, ref) => {
 	* sequence when they might not want to go through all the items.
 	*/
 	const renderMenuItem = (item, index) => {
-		if ((0, react.isValidElement)(item)) return (0, react.cloneElement)(item, { ref: handleItemRef(index) });
+		if (require_utils.isComponentElement(item, require_HeaderMenuItem.default)) return (0, react.cloneElement)(item, { ref: handleItemRef(index) });
 		return item;
 	};
 	const accessibilityLabel = {

package/lib/index.js

@@ -182,9 +182,9 @@ const require_Header = require("./components/UIShell/Header.js");
 const require_HeaderContainer = require("./components/UIShell/HeaderContainer.js");
 const require_HeaderGlobalAction = require("./components/UIShell/HeaderGlobalAction.js");
 const require_HeaderGlobalBar = require("./components/UIShell/HeaderGlobalBar.js");
+const require_HeaderMenuItem = require("./components/UIShell/HeaderMenuItem.js");
 const require_HeaderMenu = require("./components/UIShell/HeaderMenu.js");
 const require_HeaderMenuButton = require("./components/UIShell/HeaderMenuButton.js");
-const require_HeaderMenuItem = require("./components/UIShell/HeaderMenuItem.js");
 const require_HeaderName = require("./components/UIShell/HeaderName.js");
 const require_HeaderNavigation = require("./components/UIShell/HeaderNavigation.js");
 const require_SwitcherItem = require("./components/UIShell/SwitcherItem.js");
@@ -227,9 +227,9 @@ const require_FluidPasswordInput = require("./components/FluidTextInput/FluidPas
 const require_FluidTextInput_Skeleton = require("./components/FluidTextInput/FluidTextInput.Skeleton.js");
 const require_FluidNumberInput = require("./components/FluidNumberInput/FluidNumberInput.js");
 const require_FluidNumberInput_Skeleton = require("./components/FluidNumberInput/FluidNumberInput.Skeleton.js");
+const require_FluidTimePickerSelect = require("./components/FluidTimePickerSelect/FluidTimePickerSelect.js");
 const require_FluidTimePicker = require("./components/FluidTimePicker/FluidTimePicker.js");
 const require_FluidTimePicker_Skeleton = require("./components/FluidTimePicker/FluidTimePicker.Skeleton.js");
-const require_FluidTimePickerSelect = require("./components/FluidTimePickerSelect/FluidTimePickerSelect.js");
 const require_index$16 = require("./components/OverflowMenuV2/index.js");
 const require_Pagination$1 = require("./components/Pagination/experimental/Pagination.js");
 const require_PageSelector = require("./components/Pagination/experimental/PageSelector.js");

package/lib/internal/FloatingMenu.d.ts

@@ -17,13 +17,17 @@ interface Container {
     rect: DOMRect;
     position: string;
 }
+type FloatingMenuChildProps = {
+    ref?: (node: HTMLElement | null) => void;
+    style?: CSSProperties;
+};
 export type MenuDirection = typeof DIRECTION_LEFT | typeof DIRECTION_TOP | typeof DIRECTION_RIGHT | typeof DIRECTION_BOTTOM;
 export type MenuOffset = Offset | ((menuBody: HTMLElement, menuDirection: MenuDirection, triggerEl?: HTMLElement | null, flipped?: boolean) => Offset);
 interface FloatingMenuProps {
     /**
      * Contents of the floating menu.
      */
-    children: ReactElement;
+    children: ReactElement<FloatingMenuChildProps>;
     /**
      * Whether the menu alignment should be flipped.
      */

package/lib/internal/hasHelperText.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+import type { ReactNode } from 'react';
+export declare const hasHelperText: (helperText: ReactNode) => boolean;

package/lib/internal/hasHelperText.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+//#region src/internal/hasHelperText.ts
+const hasHelperText = (helperText) => typeof helperText !== "undefined" && helperText !== null && helperText !== "";
+//#endregion
+exports.hasHelperText = hasHelperText;

package/lib/tools/wrapComponent.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactElement } from 'react';
 type HTMLTagName = keyof HTMLElementTagNameMap;
 type WrapComponentArgs<T extends HTMLTagName> = {
     name: string;
@@ -15,5 +15,5 @@ type WrapComponentArgs<T extends HTMLTagName> = {
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: HTMLAttributes<T>) => React.ReactElement<any>);
+declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: HTMLAttributes<T>) => ReactElement);
 export default wrapComponent;

package/lib/tools/wrapComponent.js

@@ -15,7 +15,7 @@ let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 //#region src/tools/wrapComponent.ts
 /**
-* 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.106.0",
+  "version": "1.107.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": "^1.3.0",
-    "@carbon/icons-react": "^11.79.0",
+    "@carbon/icons-react": "^11.80.0",
     "@carbon/layout": "^11.52.0",
-    "@carbon/styles": "^1.105.0",
+    "@carbon/styles": "^1.106.0",
     "@carbon/utilities": "^0.19.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -79,14 +79,14 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.72.0",
+    "@carbon/themes": "^11.73.0",
     "@figma/code-connect": "^1.4.2",
     "@stackblitz/sdk": "^1.11.0",
-    "@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",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1",
     "@vitejs/plugin-react": "^5.0.0",
@@ -106,7 +106,7 @@
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.93.2",
-    "storybook": "^9.1.8",
+    "storybook": "^10.3.5",
     "storybook-addon-accessibility-checker": ">=9.2.0-rc.3",
     "stream-browserify": "^3.0.0",
     "tsdown": "^0.21.0",
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "5e89339998bd16c8ddd42e1cc6a2d0c15b3b0af5"
+  "gitHead": "13c5c427ad4413aea5184a0a593e6452bc163e4a"
 }

package/telemetry.yml

@@ -252,6 +252,7 @@ collect:
         - warn
         - warnText
         - width
+        - withRowGap
         # AccordionItem
         - handleAnimationEnd
         - onHeadingClick