@carbon/react 1.108.0 → 1.109.0-rc.1

package/es/components/ComboBox/ComboBox.js

@@ -126,12 +126,21 @@ const ComboBox = forwardRef((props, ref) => {
 	const [isFocused, setIsFocused] = useState(false);
 	const prevInputValue = useRef(inputValue);
 	const prevSelectedItemProp = useRef(selectedItemProp);
+	const isSyncingControlledSelectionRef = useRef(false);
+	const pendingControlledSelectionRef = useRef({
+		pending: false,
+		value: void 0
+	});
 	useEffect(() => {
 		isManualClearingRef.current = isClearing;
 		if (isClearing) setIsClearing(false);
 	}, [isClearing]);
 	useEffect(() => {
 		if (prevSelectedItemProp.current !== selectedItemProp) {
+			pendingControlledSelectionRef.current = {
+				pending: true,
+				value: selectedItemProp
+			};
 			const currentInputValue = getInputValue({
 				initialSelectedItem,
 				itemToString,
@@ -346,11 +355,14 @@ const ComboBox = forwardRef((props, ref) => {
 		isItemDisabled: isDisabledItem,
 		...downshiftProps,
 		onStateChange: ({ type, selectedItem: newSelectedItem }) => {
+			if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
+				isSyncingControlledSelectionRef.current = false;
+				return;
+			}
 			downshiftProps?.onStateChange?.({
 				type,
 				selectedItem: newSelectedItem
 			});
-			if (isManualClearingRef.current) return;
 			if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter || !allowCustomValue && type === InputBlur) && typeof newSelectedItem !== "undefined" && !isEqual(currentSelectedItem, newSelectedItem)) {
 				if (items.some((item) => isEqual(item, newSelectedItem))) committedCustomValueRef.current = "";
 				onChange({ selectedItem: newSelectedItem });
@@ -358,6 +370,21 @@ const ComboBox = forwardRef((props, ref) => {
 		}
 	});
 	const currentSelectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : selectedItem;
+	useEffect(() => {
+		if (pendingControlledSelectionRef.current.pending) {
+			const { value } = pendingControlledSelectionRef.current;
+			const nextSelectedItem = typeof value === "undefined" ? null : value;
+			pendingControlledSelectionRef.current.pending = false;
+			if (!isEqual(selectedItem, nextSelectedItem)) {
+				isSyncingControlledSelectionRef.current = true;
+				selectItem(nextSelectedItem);
+			}
+		}
+	}, [
+		selectedItem,
+		selectedItemProp,
+		selectItem
+	]);
 	useEffect(() => {
 		if (downshiftActions) downshiftActions.current = {
 			closeMenu,

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type RefObject } from 'react';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the aria-label for the modal body when it is scrollable
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the aria-labelledby for the modal body when it is scrollable
+     */
+    'aria-labelledby'?: string;
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
     /**

package/es/components/ComposedModal/ComposedModal.js

@@ -18,17 +18,17 @@ import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Layer } from "../Layer/index.js";
+import { ComposedModalContext } from "./ComposedModalContext.js";
 import { ModalHeader } from "./ModalHeader.js";
 import { ModalFooter } from "./ModalFooter.js";
 import { toggleClass } from "../../tools/toggleClass.js";
-import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { useComposedModalState } from "./useComposedModalState.js";
 import { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext } from "./ComposedModalPresence.js";
 import { isTopmostVisibleModal } from "../Modal/isTopmostVisibleModal.js";
 import classNames from "classnames";
-import React, { Children, cloneElement, useContext, useEffect, useRef } from "react";
+import React, { Children, cloneElement, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMergeRefs } from "@floating-ui/react";
@@ -39,9 +39,10 @@ import { useMergeRefs } from "@floating-ui/react";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const ModalBody = React.forwardRef(function ModalBody({ className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
+const ModalBody = React.forwardRef(function ModalBody({ ["aria-label"]: ariaLabelProp, ["aria-labelledby"]: ariaLabelledByProp, className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
 	const prefix = usePrefix();
 	const contentRef = useRef(null);
+	const { labelId, titleId } = useContext(ComposedModalContext);
 	const { height } = useResizeObserver({ ref: contentRef });
 	/**
 	* isScrollable is implicitly dependent on height, when height gets updated
@@ -57,7 +58,9 @@ const ModalBody = React.forwardRef(function ModalBody({ className: customClassNa
 		}, customClassName),
 		...hasScrollingContent || isScrollable ? {
 			tabIndex: 0,
-			role: "region"
+			role: "region",
+			"aria-label": ariaLabelProp,
+			"aria-labelledby": ariaLabelledByProp || labelId || titleId
 		} : {},
 		...rest,
 		ref: mergeRefs(contentRef, ref),
@@ -65,7 +68,8 @@ const ModalBody = React.forwardRef(function ModalBody({ className: customClassNa
 	});
 });
 ModalBody.propTypes = {
-	["aria-label"]: requiredIfGivenPropIsTruthy("hasScrollingContent", PropTypes.string),
+	["aria-label"]: PropTypes.string,
+	["aria-labelledby"]: PropTypes.string,
 	children: PropTypes.node,
 	className: PropTypes.string,
 	hasForm: PropTypes.bool,
@@ -95,6 +99,8 @@ const ComposedModal = React.forwardRef(function ComposedModal({ open, ...props }
 });
 const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["aria-labelledby"]: ariaLabelledBy, ["aria-label"]: ariaLabel, children, className: customClassName, containerClassName, danger, decorator, isFullWidth, onClose, onKeyDown, open: externalOpen, preventCloseOnClickOutside, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, size, launcherButtonRef, slug, ...rest }, ref) {
 	const prefix = usePrefix();
+	const [labelId, setLabelId] = useState(void 0);
+	const [titleId, setTitleId] = useState(void 0);
 	const innerModal = useRef(null);
 	const button = useRef(null);
 	const startSentinel = useRef(null);
@@ -286,19 +292,28 @@ const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["ar
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx(Layer, {
-		...rest,
-		level: 0,
-		role: "presentation",
-		ref: mergedRefs,
-		"aria-hidden": !open,
-		onBlur: handleBlur,
-		onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
-		onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-		onKeyDown: handleKeyDown,
-		className: modalClass,
-		"data-exiting": presenceContext?.isExiting || void 0,
-		children: modalBody
+	const contextValue = {
+		labelId,
+		titleId,
+		setLabelId,
+		setTitleId
+	};
+	return /* @__PURE__ */ jsx(ComposedModalContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Layer, {
+			...rest,
+			level: 0,
+			role: "presentation",
+			ref: mergedRefs,
+			"aria-hidden": !open,
+			onBlur: handleBlur,
+			onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
+			onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+			onKeyDown: handleKeyDown,
+			className: modalClass,
+			"data-exiting": presenceContext?.isExiting || void 0,
+			children: modalBody
+		})
 	});
 });
 ComposedModal.propTypes = {

package/es/components/ComposedModal/ComposedModalContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+export declare const ComposedModalContext: import("react").Context<{
+    labelId?: string;
+    titleId?: string;
+    setLabelId?: (id: string | undefined) => void;
+    setTitleId?: (id: string | undefined) => void;
+}>;

package/es/components/ComposedModal/ComposedModalContext.js

@@ -0,0 +1,18 @@
+/**
+ * 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 { createContext } from "react";
+//#region src/components/ComposedModal/ComposedModalContext.ts
+/**
+* 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.
+*/
+const ComposedModalContext = createContext({});
+//#endregion
+export { ComposedModalContext };

package/es/components/ComposedModal/ModalHeader.js

@@ -6,9 +6,11 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { useId } from "../../internal/useId.js";
 import { IconButton } from "../IconButton/index.js";
+import { ComposedModalContext } from "./ComposedModalContext.js";
 import classNames from "classnames";
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -21,6 +23,30 @@ import { Close } from "@carbon/icons-react";
 */
 const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
 	const prefix = usePrefix();
+	const modalId = useId();
+	const { setLabelId, setTitleId } = useContext(ComposedModalContext);
+	const generatedLabelId = `${prefix}--modal-header__label--${modalId}`;
+	const generatedTitleId = `${prefix}--modal-header__heading--${modalId}`;
+	useEffect(() => {
+		if (label && setLabelId) {
+			setLabelId(generatedLabelId);
+			return () => setLabelId(void 0);
+		}
+	}, [
+		label,
+		generatedLabelId,
+		setLabelId
+	]);
+	useEffect(() => {
+		if (title && setTitleId) {
+			setTitleId(generatedTitleId);
+			return () => setTitleId(void 0);
+		}
+	}, [
+		title,
+		generatedTitleId,
+		setTitleId
+	]);
 	function handleCloseButtonClick(evt) {
 		closeModal?.(evt);
 		buttonOnClick?.(evt);
@@ -36,10 +62,12 @@ const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, child
 		ref,
 		children: [
 			label && /* @__PURE__ */ jsx("h2", {
+				id: generatedLabelId,
 				className: labelClass,
 				children: label
 			}),
 			title && /* @__PURE__ */ jsx("h2", {
+				id: generatedTitleId,
 				className: titleClass,
 				children: title
 			}),

package/es/components/DataTable/DataTable.d.ts

@@ -69,6 +69,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     selectedRows: (DataTableRow<ColTypes> & RowType)[];
     getHeaderProps: (options: {
         header: DataTableHeader;
+        id?: string;
         isSortable?: boolean;
         onClick?: (event: MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
@@ -76,6 +77,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         }) => void;
         [key: string]: unknown;
     }) => {
+        id: string;
         isSortable: boolean | undefined;
         isSortHeader: boolean;
         key: string;
@@ -135,7 +137,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     getToolbarProps: (options?: {
         [key: string]: unknown;
     }) => {
-        size: 'sm' | undefined;
+        size: 'xs' | 'sm' | undefined;
         [key: string]: unknown;
     };
     getBatchActionProps: (options?: {
@@ -163,9 +165,12 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     };
     getCellProps: (options: {
         cell: DataTableCell<ColTypes>;
+        headers?: string;
+        [key: string]: unknown;
     }) => {
         [key: string]: unknown;
         hasAILabelHeader?: boolean;
+        headers: string;
         key: string;
     };
     /**
@@ -384,7 +389,7 @@ export declare const DataTable: {
     TableToolbarAction: import("react").ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & import("react").RefAttributes<HTMLDivElement>>;
     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;
+        ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;
@@ -408,13 +413,14 @@ export declare const DataTable: {
         };
     };
     TableToolbarMenu: {
-        ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
             className: PropTypes.Requireable<string>;
             iconDescription: PropTypes.Requireable<string>;
             menuOptionsClass: PropTypes.Requireable<string>;
             renderIcon: PropTypes.Requireable<object>;
+            size: PropTypes.Requireable<string>;
         };
     };
     propTypes: {

package/es/components/DataTable/DataTable.js

@@ -103,8 +103,10 @@ const DataTable = (props) => {
 	const getHeaderProps = ({ header, onClick, isSortable: headerIsSortable, ...rest }) => {
 		const { sortDirection, sortHeaderKey } = state;
 		const { key, slug, decorator } = header;
+		const id = typeof rest.id === "string" && rest.id.length ? rest.id : getHeaderId(key);
 		return {
 			...rest,
+			id,
 			key,
 			sortDirection,
 			isSortable: headerIsSortable ?? header.isSortable ?? isSortable,
@@ -204,13 +206,10 @@ const DataTable = (props) => {
 			onSelect: composeEventHandlers([handleSelectAll, onClick])
 		};
 	};
-	const getToolbarProps = (props) => {
-		const isSmall = size === "xs" || size === "sm";
-		return {
-			...props,
-			size: isSmall ? "sm" : void 0
-		};
-	};
+	const getToolbarProps = (props) => ({
+		...props,
+		size: size === "xs" || size === "sm" ? size : void 0
+	});
 	const getBatchActionProps = (props) => {
 		const { shouldShowBatchActions } = state;
 		const selectedRowCount = selectedRows.length;
@@ -240,10 +239,12 @@ const DataTable = (props) => {
 			useStaticWidth
 		};
 	};
-	const getCellProps = ({ cell: { hasAILabelHeader, id }, ...rest }) => {
+	const getCellProps = ({ cell: { hasAILabelHeader, id, info: { header } }, headers: customHeaders, ...rest }) => {
+		const headers = typeof customHeaders === "string" && customHeaders.length ? customHeaders : getHeaderId(header);
 		return {
 			...rest,
 			hasAILabelHeader,
+			headers,
 			key: id
 		};
 	};
@@ -265,6 +266,7 @@ const DataTable = (props) => {
 	* Generates a prefix for table related IDs.
 	*/
 	const getTablePrefix = () => `data-table-${instanceId}`;
+	const getHeaderId = (headerKey) => `${getTablePrefix()}__header-${headerKey}`;
 	/**
 	* Generates a new `rowsById` object with updated selection state.
 	*/

package/es/components/DataTable/TableToolbar.d.ts

@@ -1,11 +1,17 @@
 /**
- * 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 React from 'react';
+export declare const TableToolbarContext: React.Context<{
+    size?: "xs" | "sm" | "lg";
+}>;
+export declare const useTableToolbar: () => {
+    size?: "xs" | "sm" | "lg";
+};
 export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Specify a label to be read by screen readers on the container node
@@ -24,7 +30,7 @@ export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement>
     /**
      * `lg` Change the row height of table
      */
-    size?: 'sm' | 'lg';
+    size?: 'xs' | 'sm' | 'lg';
 }
 declare const TableToolbar: {
     ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;

package/es/components/DataTable/TableToolbar.js

@@ -8,35 +8,45 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import classNames from "classnames";
-import "react";
+import { createContext, useContext } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableToolbar.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.
 */
+const TableToolbarContext = createContext({});
+const useTableToolbar = () => useContext(TableToolbarContext);
 const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLabel: deprecatedAriaLabel, children, size, ...rest }) => {
 	const prefix = usePrefix();
 	const className = classNames({
 		[`${prefix}--table-toolbar`]: true,
-		[`${prefix}--table-toolbar--${size}`]: size
+		[`${prefix}--table-toolbar--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
-	return /* @__PURE__ */ jsx("section", {
-		role: "group",
-		"aria-label": deprecatedAriaLabel || ariaLabel,
-		...rest,
-		className,
-		children
+	return /* @__PURE__ */ jsx(TableToolbarContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx("section", {
+			role: "group",
+			"aria-label": deprecatedAriaLabel || ariaLabel,
+			...rest,
+			className,
+			children
+		})
 	});
 };
 TableToolbar.propTypes = {
 	["aria-label"]: PropTypes.string,
 	ariaLabel: deprecate(PropTypes.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
 	children: PropTypes.node,
-	size: PropTypes.oneOf(["sm", "lg"])
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"lg"
+	])
 };
 //#endregion
-export { TableToolbar as default };
+export { TableToolbar as default, useTableToolbar };

package/es/components/DataTable/TableToolbarMenu.d.ts

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { OverflowMenuProps } from '../OverflowMenu';
 export type TableToolbarMenuProps = OverflowMenuProps;
 declare const TableToolbarMenu: {
-    ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         /**
@@ -27,6 +27,10 @@ declare const TableToolbarMenu: {
          * A component used to render an icon.
          */
         renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the size of the ToolbarMenu.
+         */
+        size: PropTypes.Requireable<string>;
     };
 };
 export default TableToolbarMenu;

package/es/components/DataTable/TableToolbarMenu.js

@@ -6,6 +6,7 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { useTableToolbar } from "./TableToolbar.js";
 import OverflowMenu from "../OverflowMenu/index.js";
 import classNames from "classnames";
 import "react";
@@ -20,13 +21,16 @@ import { Settings } from "@carbon/icons-react";
 * LICENSE file in the root directory of this source tree.
 */
 const defaultIconDescription = "Settings";
-const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, ...rest }) => {
+const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, size: sizeProp, ...rest }) => {
+	const toolbarContext = useTableToolbar();
+	const size = sizeProp ?? toolbarContext.size;
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx(OverflowMenu, {
 		renderIcon,
 		className: classNames(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`),
 		iconDescription,
 		menuOptionsClass: classNames(menuOptionsClass, `${prefix}--toolbar-action__menu`),
+		size,
 		flipped: true,
 		...rest,
 		children
@@ -37,7 +41,13 @@ TableToolbarMenu.propTypes = {
 	className: PropTypes.string,
 	iconDescription: PropTypes.string,
 	menuOptionsClass: PropTypes.string,
-	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	])
 };
 //#endregion
 export { TableToolbarMenu as default };

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -13,7 +13,7 @@ declare const translationIds: {
     readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
 };
 type TranslationKey = keyof typeof translationIds;
-type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex' | 'size';
+type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
 /**
  * @deprecated Passing `''` as the event sentinel is legacy compatibility
@@ -69,14 +69,10 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
      * Provide an optional className for the overall container of the Search
      */
     searchContainerClass?: string;
-    /**
-     * Specify the size of the Search
-     */
-    size?: 'sm' | 'md' | 'lg';
     tabIndex?: number | string;
 }
 declare const TableToolbarSearch: {
-    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**

package/es/components/DataTable/TableToolbarSearch.js

@@ -9,6 +9,7 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import Search_default from "../Search/index.js";
+import { useTableToolbar } from "./TableToolbar.js";
 import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
@@ -31,7 +32,9 @@ const defaultTranslations = {
 const defaultTranslateWithId = (messageId) => {
 	return defaultTranslations[messageId];
 };
-const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size = "lg", tabIndex = "0", ...rest }) => {
+const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size: sizeProp, tabIndex = "0", ...rest }) => {
+	const toolbarContext = useTableToolbar();
+	const size = sizeProp ?? toolbarContext.size;
 	const { current: controlled } = useRef(expandedProp !== void 0);
 	const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
 	const expanded = controlled ? expandedProp : expandedState;
@@ -100,6 +103,7 @@ TableToolbarSearch.propTypes = {
 	placeholder: PropTypes.string,
 	searchContainerClass: PropTypes.string,
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/es/components/Modal/Modal.js

@@ -26,14 +26,14 @@ import { composeEventHandlers } from "../../tools/events.js";
 import { Layer } from "../Layer/index.js";
 import InlineLoading_default from "../InlineLoading/index.js";
 import { toggleClass } from "../../tools/toggleClass.js";
-import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
+import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
 import classNames from "classnames";
-import React, { cloneElement, useCallback, useContext, useEffect, useRef } from "react";
+import React, { cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -167,11 +167,18 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		[`${prefix}--modal-container--${size}`]: size,
 		[`${prefix}--modal-container--full-width`]: isFullWidth
 	});
-	/**
-	* isScrollable is implicitly dependent on height, when height gets updated
-	* via `useResizeObserver`, clientHeight and scrollHeight get updated too
-	*/
-	const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
+	const currentScrollHeight = contentRef.current?.scrollHeight || 0;
+	const currentClientHeight = contentRef.current?.clientHeight || 0;
+	const [isScrollable, setIsScrollable] = useState(currentScrollHeight > currentClientHeight);
+	useEffect(() => {
+		if (!contentRef.current) {
+			setIsScrollable(false);
+			return;
+		}
+		const diff = contentRef.current.scrollHeight - contentRef.current.clientHeight;
+		if (diff > 5) setIsScrollable(true);
+		else if (diff < -5) setIsScrollable(false);
+	}, [currentScrollHeight, currentClientHeight]);
 	const contentClasses = classNames(`${prefix}--modal-content`, {
 		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300

package/es/components/Search/Search.js

@@ -110,7 +110,7 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		role: "search",
-		"aria-label": placeholder,
+		"aria-labelledby": searchId,
 		className: searchClasses,
 		children: [
 			onExpand && !isExpanded ? /* @__PURE__ */ jsx(Tooltip, {

package/es/index.d.ts

@@ -46,6 +46,7 @@ export * from './components/FormLabel';
 export * from './components/Grid';
 export * from './components/Icon/Icon.Skeleton';
 export * from './components/IdPrefix';
+export { InlineCheckbox } from './components/InlineCheckbox';
 export * from './components/InlineLoading';
 export * from './components/Link';
 export * from './components/ListItem';