@carbon/react 1.106.0-rc.0 → 1.107.0-rc.0

package/es/components/TextInput/TextInput.js

@@ -10,6 +10,7 @@ import { Text } from "../Text/Text.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
@@ -75,7 +76,7 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 		title: placeholder,
 		disabled: normalizedProps.disabled,
 		readOnly,
-		["aria-describedby"]: helperText && normalizedProps.helperId,
+		["aria-describedby"]: hasHelperText(helperText) && !normalizedProps.invalid ? normalizedProps.helperId : void 0,
 		...rest
 	};
 	if (enableCounter) sharedTextInputProps.maxLength = maxCount;
@@ -124,7 +125,7 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 		className: `${prefix}--text-input__label-wrapper`,
 		children: [label, counter]
 	});
-	const helper = typeof helperText !== "undefined" && helperText !== null && /* @__PURE__ */ jsx(Text, {
+	const helper = hasHelperText(helperText) && /* @__PURE__ */ jsx(Text, {
 		as: "div",
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
@@ -163,34 +164,41 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "mini" }) : candidate;
 	return /* @__PURE__ */ jsxs("div", {
 		className: inputWrapperClasses,
-		children: [!inline ? labelWrapper : /* @__PURE__ */ jsxs("div", {
-			className: `${prefix}--text-input__label-helper-wrapper`,
-			children: [labelWrapper, !isFluid && (normalizedProps.validation || helper)]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: fieldOuterWrapperClasses,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: fieldWrapperClasses,
-				"data-invalid": normalizedProps.invalid || null,
-				children: [
-					Icon && /* @__PURE__ */ jsx(Icon, { className: iconClasses }),
-					input,
-					slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
-						className: `${prefix}--text-input__field-inner-wrapper--decorator`,
-						children: normalizedDecorator
-					}) : "",
-					/* @__PURE__ */ jsx("span", {
-						className: `${prefix}--text-input__counter-alert`,
-						role: "alert",
-						"aria-live": "assertive",
-						"aria-atomic": "true",
-						ref: announcerRef,
-						children: ariaAnnouncement
-					}),
-					isFluid && /* @__PURE__ */ jsx("hr", { className: `${prefix}--text-input__divider` }),
-					isFluid && !inline && normalizedProps.validation
-				]
-			}), !isFluid && !inline && (normalizedProps.validation || helper)]
-		})]
+		children: [
+			!inline ? labelWrapper : /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: labelWrapper
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: fieldOuterWrapperClasses,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: fieldWrapperClasses,
+					"data-invalid": normalizedProps.invalid || null,
+					children: [
+						input,
+						Icon && /* @__PURE__ */ jsx(Icon, { className: iconClasses }),
+						slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+							className: `${prefix}--text-input__field-inner-wrapper--decorator`,
+							children: normalizedDecorator
+						}) : "",
+						/* @__PURE__ */ jsx("span", {
+							className: `${prefix}--text-input__counter-alert`,
+							role: "alert",
+							"aria-live": "assertive",
+							"aria-atomic": "true",
+							ref: announcerRef,
+							children: ariaAnnouncement
+						}),
+						isFluid && /* @__PURE__ */ jsx("hr", { className: `${prefix}--text-input__divider` }),
+						isFluid && !inline && normalizedProps.validation
+					]
+				}), !isFluid && !inline && (normalizedProps.validation || helper)]
+			}),
+			inline && !isFluid && /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: normalizedProps.validation || helper
+			})
+		]
 	});
 });
 TextInput.displayName = "TextInput";
@@ -214,6 +222,7 @@ TextInput.propTypes = {
 	placeholder: PropTypes.string,
 	readOnly: PropTypes.bool,
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/es/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/es/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/es/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/es/components/Theme/index.js

@@ -9,12 +9,12 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { LayerContext } from "../Layer/LayerContext.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
 import classNames from "classnames";
-import React, { useMemo } from "react";
+import React, { cloneElement, isValidElement, useMemo } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "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.
@@ -24,7 +24,7 @@ const GlobalTheme = React.forwardRef(({ children, theme }, ref) => {
 	const value = useMemo(() => {
 		return { theme };
 	}, [theme]);
-	const childrenWithProps = React.cloneElement(children, { ref });
+	const childrenWithProps = isValidElement(children) ? cloneElement(children, { ref }) : children;
 	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
 		value,
 		children: childrenWithProps

package/es/components/TimePicker/TimePicker.js

@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const TimePicker = 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 = usePrefix();
 	function handleOnClick(evt) {
 		if (!disabled) onClick(evt);
@@ -89,6 +89,7 @@ const TimePicker = 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__ */ jsxs("div", {
 		className: classNames(`${prefix}--form-item`, className),
 		children: [
@@ -112,7 +113,9 @@ const TimePicker = 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__ */ jsx("div", {
 						className: `${prefix}--time-picker__error__icon`,
 						children: React.createElement(normalizedProps.icon, {

package/es/components/TreeView/TreeNode.js

@@ -15,7 +15,7 @@ import { IconButton } from "../IconButton/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { DepthContext, TreeContext } from "./TreeContext.js";
 import classNames from "classnames";
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDown } from "@carbon/icons-react";
@@ -32,7 +32,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.isValidElement(node)) {
+	if (isValidElement(node)) {
 		const children = node.props.children;
 		return extractTextContent(children);
 	}

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

@@ -9,11 +9,13 @@ import { PrefixContext } from "../../internal/usePrefix.js";
 import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
+import HeaderMenuItem from "./HeaderMenuItem.js";
 import classNames from "classnames";
-import { Children, cloneElement, forwardRef, isValidElement, useContext, useRef, useState } from "react";
+import { Children, cloneElement, forwardRef, useContext, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -73,7 +75,7 @@ const HeaderMenu = forwardRef((props, ref) => {
 		}
 	};
 	const hasActiveDescendant = (childrenArg) => Children.toArray(childrenArg).some((child) => {
-		if (!isValidElement(child)) return false;
+		if (!isComponentElement(child, HeaderMenuItem)) return false;
 		const { isActive, isCurrentPage, children } = child.props;
 		return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
 	});
@@ -84,7 +86,7 @@ const HeaderMenu = forwardRef((props, ref) => {
 	* sequence when they might not want to go through all the items.
 	*/
 	const renderMenuItem = (item, index) => {
-		if (isValidElement(item)) return cloneElement(item, { ref: handleItemRef(index) });
+		if (isComponentElement(item, HeaderMenuItem)) return cloneElement(item, { ref: handleItemRef(index) });
 		return item;
 	};
 	const accessibilityLabel = {

package/es/index.js

@@ -181,9 +181,9 @@ import Header from "./components/UIShell/Header.js";
 import HeaderContainer from "./components/UIShell/HeaderContainer.js";
 import HeaderGlobalAction from "./components/UIShell/HeaderGlobalAction.js";
 import HeaderGlobalBar from "./components/UIShell/HeaderGlobalBar.js";
+import HeaderMenuItem from "./components/UIShell/HeaderMenuItem.js";
 import HeaderMenu from "./components/UIShell/HeaderMenu.js";
 import HeaderMenuButton from "./components/UIShell/HeaderMenuButton.js";
-import HeaderMenuItem from "./components/UIShell/HeaderMenuItem.js";
 import HeaderName from "./components/UIShell/HeaderName.js";
 import HeaderNavigation from "./components/UIShell/HeaderNavigation.js";
 import SwitcherItem from "./components/UIShell/SwitcherItem.js";
@@ -226,9 +226,9 @@ import FluidPasswordInput from "./components/FluidTextInput/FluidPasswordInput.j
 import FluidTextInputSkeleton from "./components/FluidTextInput/FluidTextInput.Skeleton.js";
 import FluidNumberInput from "./components/FluidNumberInput/FluidNumberInput.js";
 import FluidNumberInputSkeleton from "./components/FluidNumberInput/FluidNumberInput.Skeleton.js";
+import FluidTimePickerSelect from "./components/FluidTimePickerSelect/FluidTimePickerSelect.js";
 import FluidTimePicker from "./components/FluidTimePicker/FluidTimePicker.js";
 import FluidTimePickerSkeleton from "./components/FluidTimePicker/FluidTimePicker.Skeleton.js";
-import FluidTimePickerSelect from "./components/FluidTimePickerSelect/FluidTimePickerSelect.js";
 import { OverflowMenuV2 } from "./components/OverflowMenuV2/index.js";
 import Pagination$1 from "./components/Pagination/experimental/Pagination.js";
 import PageSelector from "./components/Pagination/experimental/PageSelector.js";

package/es/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/es/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/es/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
+export { hasHelperText };

package/es/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/es/tools/wrapComponent.js

@@ -11,7 +11,7 @@ import React from "react";
 import PropTypes from "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/lib/components/Accordion/AccordionItem.d.ts

@@ -38,12 +38,12 @@ export interface AccordionItemProps {
      * removed in the next major release of Carbon. Use the
      * `renderToggle` prop instead.
      */
-    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
+    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
     /**
      * The callback function to render the expand button.
      * Can be a React component class.
      */
-    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
+    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
     /**
      * The accordion title.
      */

package/lib/components/Button/Button.js

@@ -49,7 +49,7 @@ const ButtonTooltipPositions = [
 	"bottom",
 	"left"
 ];
-function isIconOnlyButton(hasIconOnly, _kind) {
+function isIconOnlyButton(hasIconOnly) {
 	if (hasIconOnly === true) return true;
 	return false;
 }

package/lib/components/Checkbox/Checkbox.js

@@ -12,6 +12,7 @@ const require_useId = require("../../internal/useId.js");
 const require_noopFn = require("../../internal/noopFn.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_index = require("../AILabel/index.js");
 let classnames = require("classnames");
@@ -43,7 +44,7 @@ const Checkbox = react.default.forwardRef(({ className, decorator, helperText, i
 	const showWarning = normalizedProps.warn;
 	const showHelper = !normalizedProps.invalid && !normalizedProps.warn;
 	const checkboxGroupInstanceId = require_useId.useId();
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `checkbox-helper-text-${checkboxGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: helperId,

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_index = require("../AILabel/index.js");
 const require_Checkbox = require("../Checkbox/Checkbox.js");
@@ -42,7 +43,7 @@ const CheckboxGroup = ({ children, className, decorator, helperText, invalid, in
 	});
 	const showWarning = normalizedProps.warn;
 	const showHelper = !normalizedProps.invalid && !normalizedProps.warn;
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: helperId,

package/lib/components/ComboBox/ComboBox.d.ts

@@ -197,7 +197,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
 }
 type ComboboxComponentProps<ItemType> = PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>;
 export interface ComboBoxComponent {
-    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement<any> | null;
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }
 declare const _default: ComboBoxComponent;
 export default _default;

package/lib/components/ComboBox/ComboBox.js

@@ -356,7 +356,7 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 				selectedItem: newSelectedItem
 			});
 			if (isManualClearingRef.current) return;
-			if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== "undefined" && !(0, react_fast_compare.default)(selectedItemProp, newSelectedItem)) {
+			if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter || !allowCustomValue && type === InputBlur) && typeof newSelectedItem !== "undefined" && !(0, react_fast_compare.default)(currentSelectedItem, newSelectedItem)) {
 				if (items.some((item) => (0, react_fast_compare.default)(item, newSelectedItem))) committedCustomValueRef.current = "";
 				onChange({ selectedItem: newSelectedItem });
 			}

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -11,7 +11,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher
      */
-    children?: ReactElement<any>[];
+    children?: ReactElement | ReactElement[];
     /**
      * Specify an optional className to be added to the container node
      */

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -12,8 +12,8 @@ const require_match = require("../../internal/keyboard/match.js");
 const require_navigation = require("../../internal/keyboard/navigation.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
-const require_events = require("../../tools/events.js");
 const require_index = require("../Layout/index.js");
+const require_Switch = require("../Switch/Switch.js");
 const require_IconSwitch = require("../Switch/IconSwitch.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
@@ -48,25 +48,25 @@ const ContentSwitcher = ({ children, className, light, lowContrast, selectedInde
 		const ref = switchRefs.current[index];
 		if (ref) ref.focus();
 	};
-	const isKeyboardEvent = (event) => event && typeof event === "object" && "key" in event;
+	const hasKey = (event) => typeof event === "object" && event !== null && "key" in event;
 	const handleChildChange = (event) => {
 		if (typeof event.index === "undefined") return;
 		const { index } = event;
-		if (isKeyboardEvent(event) && require_match.matches(event, [require_keys.ArrowRight, require_keys.ArrowLeft])) {
+		if (hasKey(event) && (require_match.match(event.key, require_keys.ArrowRight) || require_match.match(event.key, require_keys.ArrowLeft))) {
 			const nextIndex = require_navigation.getNextIndex(event.key, index, childrenArray.length);
 			if (typeof nextIndex !== "number") return;
 			focusSwitch(nextIndex);
 			if (selectionMode !== "manual") {
 				const child = childrenArray[nextIndex];
 				setSelectedIndex(nextIndex);
-				if ((0, react.isValidElement)(child)) onChange({
+				if (require_utils.isComponentElement(child, require_Switch.default) || require_utils.isComponentElement(child, require_IconSwitch.default)) onChange({
 					...event,
 					index: nextIndex,
 					name: child.props.name,
 					text: child.props.text
 				});
 			}
-		} else if (selectedIndex !== index && (isKeyboardEvent(event) ? require_match.matches(event, [require_keys.Enter, require_keys.Space]) : true)) {
+		} else if (selectedIndex !== index && (hasKey(event) ? require_match.match(event.key, require_keys.Enter) || require_match.match(event.key, require_keys.Space) : true)) {
 			setSelectedIndex(index);
 			focusSwitch(index);
 			onChange(event);
@@ -92,14 +92,23 @@ const ContentSwitcher = ({ children, className, light, lowContrast, selectedInde
 		className: classes,
 		role: "tablist",
 		onChange: void 0,
-		children: children && react.Children.map(children, (child, index) => (0, react.cloneElement)(child, {
-			index,
-			onClick: require_events.composeEventHandlers([handleChildChange, child.props.onClick]),
-			onKeyDown: require_events.composeEventHandlers([handleChildChange, child.props.onKeyDown]),
-			selected: index === selectedIndex,
-			ref: handleItemRef(index),
-			size
-		}))
+		children: react.Children.map(children, (child, index) => {
+			if (!require_utils.isComponentElement(child, require_Switch.default) && !require_utils.isComponentElement(child, require_IconSwitch.default)) return child;
+			return (0, react.cloneElement)(child, {
+				index,
+				onClick: (event) => {
+					handleChildChange(event);
+					child.props.onClick?.(event);
+				},
+				onKeyDown: (event) => {
+					handleChildChange(event);
+					child.props.onKeyDown?.(event);
+				},
+				selected: index === selectedIndex,
+				ref: handleItemRef(index),
+				...require_utils.isComponentElement(child, require_IconSwitch.default) ? { size } : {}
+			});
+		})
 	});
 };
 ContentSwitcher.displayName = "ContentSwitcher";

package/lib/components/DataTable/DataTable.d.ts

@@ -255,7 +255,7 @@ export declare const DataTable: {
             tabIndex: PropTypes.Requireable<number>;
         };
     };
-    TableActionList: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+    TableActionList: (props: import("react").HTMLAttributes<"div">) => ReactElement;
     TableBatchAction: {
         ({ renderIcon, iconDescription, ...props }: import("./TableBatchAction").TableBatchActionProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
@@ -332,7 +332,7 @@ export declare const DataTable: {
             colSpan: PropTypes.Validator<number>;
         };
     };
-    TableHead: (props: import("react").HTMLAttributes<"thead">) => React.ReactElement<any>;
+    TableHead: (props: import("react").HTMLAttributes<"thead">) => ReactElement;
     TableHeader: import("react").ForwardRefExoticComponent<import("./TableHeader").TableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
     TableRow: import("react").ForwardRefExoticComponent<import("./TableRow").TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
     TableSelectAll: {
@@ -382,7 +382,7 @@ export declare const DataTable: {
         };
     };
     TableToolbarAction: import("react").ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & import("react").RefAttributes<HTMLDivElement>>;
-    TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+    TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => ReactElement;
     TableToolbarSearch: {
         ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {

package/lib/components/DataTable/TableActionList.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableActionList: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+declare const TableActionList: (props: import("react").HTMLAttributes<"div">) => import("react").ReactElement;
 export default TableActionList;

package/lib/components/DataTable/TableHead.d.ts

@@ -6,5 +6,5 @@
  */
 import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: (props: import("react").HTMLAttributes<"thead">) => React.ReactElement<any>;
+declare const TableHead: (props: import("react").HTMLAttributes<"thead">) => import("react").ReactElement;
 export default TableHead;

package/lib/components/DataTable/TableSlugRow.d.ts

@@ -1,11 +1,11 @@
 /**
- * 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 PropTypes from 'prop-types';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface TableSlugRowProps {
     /**
      * The CSS class names of the cell that wraps the underlying input control

package/lib/components/DataTable/TableSlugRow.js

@@ -17,7 +17,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/DataTable/TableSlugRow.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.
@@ -27,16 +27,13 @@ const TableSlugRow = ({ className, slug }) => {
 		require_deprecateComponent.deprecateComponent("TableSlugRow", "The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.");
 	}, []);
 	const prefix = require_usePrefix.usePrefix();
-	const TableSlugRowClasses = (0, classnames.default)({
-		...className && { [className]: true },
-		[`${prefix}--table-column-slug`]: true,
-		[`${prefix}--table-column-slug--active`]: slug
-	});
-	let normalizedSlug;
-	if (slug) normalizedSlug = react.default.cloneElement(slug, { size: "mini" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-		className: TableSlugRowClasses,
-		children: normalizedSlug
+		className: (0, classnames.default)({
+			...className && { [className]: true },
+			[`${prefix}--table-column-slug`]: true,
+			[`${prefix}--table-column-slug--active`]: slug
+		}),
+		children: (0, react.isValidElement)(slug) ? (0, react.cloneElement)(slug, { size: "mini" }) : void 0
 	});
 };
 TableSlugRow.displayName = "TableSlugRow";

package/lib/components/DataTable/TableToolbarContent.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => import("react").ReactElement;
 export default TableToolbarContent;