@carbon/react 1.108.0 → 1.109.0-rc.1

package/es/index.js

@@ -82,6 +82,7 @@ import TableExpandedRow from "./components/DataTable/TableExpandedRow.js";
 import TableHead from "./components/DataTable/TableHead.js";
 import TableHeader from "./components/DataTable/TableHeader.js";
 import TableRow from "./components/DataTable/TableRow.js";
+import InlineCheckbox from "./components/InlineCheckbox/InlineCheckbox.js";
 import TableSelectAll from "./components/DataTable/TableSelectAll.js";
 import RadioButton from "./components/RadioButton/RadioButton.js";
 import TableSelectRow from "./components/DataTable/TableSelectRow.js";
@@ -249,4 +250,4 @@ import { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
 * LICENSE file in the root directory of this source tree.
 */
 //#endregion
-export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
+export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };

package/es/internal/FloatingMenu.js

@@ -113,7 +113,10 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 					position: getComputedStyle(target()).position
 				}
 			});
-			if (!floatingPosition || floatingPosition.left !== newFloatingPosition.left || floatingPosition.top !== newFloatingPosition.top) setFloatingPosition(newFloatingPosition);
+			setFloatingPosition((prev) => {
+				if (prev && prev.left === newFloatingPosition.left && prev.top === newFloatingPosition.top) return prev;
+				return newFloatingPosition;
+			});
 			if (!isAdjustment) {
 				const newMenuSize = menuBody.getBoundingClientRect();
 				if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) updateMenuPosition(true);
@@ -125,8 +128,7 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 		menuDirection,
 		flipped,
 		target,
-		updateOrientation,
-		floatingPosition
+		updateOrientation
 	]);
 	const focusMenuContent = (menuBody) => {
 		const primaryFocusNode = selectorPrimaryFocus ? menuBody.querySelector(selectorPrimaryFocus) : null;

package/lib/components/ComboBox/ComboBox.js

@@ -131,12 +131,21 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 	const [isFocused, setIsFocused] = (0, react.useState)(false);
 	const prevInputValue = (0, react.useRef)(inputValue);
 	const prevSelectedItemProp = (0, react.useRef)(selectedItemProp);
+	const isSyncingControlledSelectionRef = (0, react.useRef)(false);
+	const pendingControlledSelectionRef = (0, react.useRef)({
+		pending: false,
+		value: void 0
+	});
 	(0, react.useEffect)(() => {
 		isManualClearingRef.current = isClearing;
 		if (isClearing) setIsClearing(false);
 	}, [isClearing]);
 	(0, react.useEffect)(() => {
 		if (prevSelectedItemProp.current !== selectedItemProp) {
+			pendingControlledSelectionRef.current = {
+				pending: true,
+				value: selectedItemProp
+			};
 			const currentInputValue = getInputValue({
 				initialSelectedItem,
 				itemToString,
@@ -351,11 +360,14 @@ const ComboBox = (0, react.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" && !(0, react_fast_compare.default)(currentSelectedItem, newSelectedItem)) {
 				if (items.some((item) => (0, react_fast_compare.default)(item, newSelectedItem))) committedCustomValueRef.current = "";
 				onChange({ selectedItem: newSelectedItem });
@@ -363,6 +375,21 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 		}
 	});
 	const currentSelectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : selectedItem;
+	(0, react.useEffect)(() => {
+		if (pendingControlledSelectionRef.current.pending) {
+			const { value } = pendingControlledSelectionRef.current;
+			const nextSelectedItem = typeof value === "undefined" ? null : value;
+			pendingControlledSelectionRef.current.pending = false;
+			if (!(0, react_fast_compare.default)(selectedItem, nextSelectedItem)) {
+				isSyncingControlledSelectionRef.current = true;
+				selectItem(nextSelectedItem);
+			}
+		}
+	}, [
+		selectedItem,
+		selectedItemProp,
+		selectItem
+	]);
 	(0, react.useEffect)(() => {
 		if (downshiftActions) downshiftActions.current = {
 			closeMenu,

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

@@ -19,10 +19,10 @@ const require_useResizeObserver = require("../../internal/useResizeObserver.js")
 const require_events = require("../../tools/events.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
 const require_index$2 = require("../Layer/index.js");
+const require_ComposedModalContext = require("./ComposedModalContext.js");
 const require_ModalHeader = require("./ModalHeader.js");
 const require_ModalFooter = require("./ModalFooter.js");
 const require_toggleClass = require("../../tools/toggleClass.js");
-const require_requiredIfGivenPropIsTruthy = require("../../prop-types/requiredIfGivenPropIsTruthy.js");
 const require_wrapFocus = require("../../internal/wrapFocus.js");
 const require_Dialog = require("../Dialog/Dialog.js");
 const require_useComposedModalState = require("./useComposedModalState.js");
@@ -43,9 +43,10 @@ let _floating_ui_react = require("@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.default.forwardRef(function ModalBody({ className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
+const ModalBody = react.default.forwardRef(function ModalBody({ ["aria-label"]: ariaLabelProp, ["aria-labelledby"]: ariaLabelledByProp, className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const contentRef = (0, react.useRef)(null);
+	const { labelId, titleId } = (0, react.useContext)(require_ComposedModalContext.ComposedModalContext);
 	const { height } = require_useResizeObserver.useResizeObserver({ ref: contentRef });
 	/**
 	* isScrollable is implicitly dependent on height, when height gets updated
@@ -61,7 +62,9 @@ const ModalBody = react.default.forwardRef(function ModalBody({ className: custo
 		}, customClassName),
 		...hasScrollingContent || isScrollable ? {
 			tabIndex: 0,
-			role: "region"
+			role: "region",
+			"aria-label": ariaLabelProp,
+			"aria-labelledby": ariaLabelledByProp || labelId || titleId
 		} : {},
 		...rest,
 		ref: require_mergeRefs.mergeRefs(contentRef, ref),
@@ -69,7 +72,8 @@ const ModalBody = react.default.forwardRef(function ModalBody({ className: custo
 	});
 });
 ModalBody.propTypes = {
-	["aria-label"]: require_requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy("hasScrollingContent", prop_types.default.string),
+	["aria-label"]: prop_types.default.string,
+	["aria-labelledby"]: prop_types.default.string,
 	children: prop_types.default.node,
 	className: prop_types.default.string,
 	hasForm: prop_types.default.bool,
@@ -99,6 +103,8 @@ const ComposedModal = react.default.forwardRef(function ComposedModal({ open, ..
 });
 const ComposedModalDialog = react.default.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 = require_usePrefix.usePrefix();
+	const [labelId, setLabelId] = (0, react.useState)(void 0);
+	const [titleId, setTitleId] = (0, react.useState)(void 0);
 	const innerModal = (0, react.useRef)(null);
 	const button = (0, react.useRef)(null);
 	const startSentinel = (0, react.useRef)(null);
@@ -290,19 +296,28 @@ const ComposedModalDialog = react.default.forwardRef(function ComposedModalDialo
 			})
 		]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Layer, {
-		...rest,
-		level: 0,
-		role: "presentation",
-		ref: mergedRefs,
-		"aria-hidden": !open,
-		onBlur: handleBlur,
-		onClick: require_events.composeEventHandlers([rest?.onClick, handleOnClick]),
-		onMouseDown: require_events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-		onKeyDown: handleKeyDown,
-		className: modalClass,
-		"data-exiting": presenceContext?.isExiting || void 0,
-		children: modalBody
+	const contextValue = {
+		labelId,
+		titleId,
+		setLabelId,
+		setTitleId
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComposedModalContext.ComposedModalContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Layer, {
+			...rest,
+			level: 0,
+			role: "presentation",
+			ref: mergedRefs,
+			"aria-hidden": !open,
+			onBlur: handleBlur,
+			onClick: require_events.composeEventHandlers([rest?.onClick, handleOnClick]),
+			onMouseDown: require_events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+			onKeyDown: handleKeyDown,
+			className: modalClass,
+			"data-exiting": presenceContext?.isExiting || void 0,
+			children: modalBody
+		})
 	});
 });
 ComposedModal.propTypes = {

package/lib/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/lib/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.
+ */
+
+require("../../_virtual/_rolldown/runtime.js");
+//#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 = (0, require("react").createContext)({});
+//#endregion
+exports.ComposedModalContext = ComposedModalContext;

package/lib/components/ComposedModal/ModalHeader.js

@@ -7,7 +7,9 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_useId = require("../../internal/useId.js");
 const require_index = require("../IconButton/index.js");
+const require_ComposedModalContext = require("./ComposedModalContext.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -25,6 +27,30 @@ let _carbon_icons_react = require("@carbon/icons-react");
 */
 const ModalHeader = react.default.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
+	const modalId = require_useId.useId();
+	const { setLabelId, setTitleId } = (0, react.useContext)(require_ComposedModalContext.ComposedModalContext);
+	const generatedLabelId = `${prefix}--modal-header__label--${modalId}`;
+	const generatedTitleId = `${prefix}--modal-header__heading--${modalId}`;
+	(0, react.useEffect)(() => {
+		if (label && setLabelId) {
+			setLabelId(generatedLabelId);
+			return () => setLabelId(void 0);
+		}
+	}, [
+		label,
+		generatedLabelId,
+		setLabelId
+	]);
+	(0, react.useEffect)(() => {
+		if (title && setTitleId) {
+			setTitleId(generatedTitleId);
+			return () => setTitleId(void 0);
+		}
+	}, [
+		title,
+		generatedTitleId,
+		setTitleId
+	]);
 	function handleCloseButtonClick(evt) {
 		closeModal?.(evt);
 		buttonOnClick?.(evt);
@@ -40,10 +66,12 @@ const ModalHeader = react.default.forwardRef(function ModalHeader({ buttonOnClic
 		ref,
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				id: generatedLabelId,
 				className: labelClass,
 				children: label
 			}),
 			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				id: generatedTitleId,
 				className: titleClass,
 				children: title
 			}),

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

@@ -106,8 +106,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,
@@ -207,13 +209,10 @@ const DataTable = (props) => {
 			onSelect: require_events.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;
@@ -243,10 +242,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
 		};
 	};
@@ -268,6 +269,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/lib/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/lib/components/DataTable/TableToolbar.js

@@ -17,30 +17,41 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("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 = (0, react.createContext)({});
+const useTableToolbar = () => (0, react.useContext)(TableToolbarContext);
 const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLabel: deprecatedAriaLabel, children, size, ...rest }) => {
 	const prefix = require_usePrefix.usePrefix();
 	const className = (0, classnames.default)({
 		[`${prefix}--table-toolbar`]: true,
-		[`${prefix}--table-toolbar--${size}`]: size
+		[`${prefix}--table-toolbar--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-		role: "group",
-		"aria-label": deprecatedAriaLabel || ariaLabel,
-		...rest,
-		className,
-		children
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableToolbarContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+			role: "group",
+			"aria-label": deprecatedAriaLabel || ariaLabel,
+			...rest,
+			className,
+			children
+		})
 	});
 };
 TableToolbar.propTypes = {
 	["aria-label"]: prop_types.default.string,
 	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
 	children: prop_types.default.node,
-	size: prop_types.default.oneOf(["sm", "lg"])
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"lg"
+	])
 };
 //#endregion
 exports.default = TableToolbar;
+exports.useTableToolbar = useTableToolbar;

package/lib/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/lib/components/DataTable/TableToolbarMenu.js

@@ -7,6 +7,7 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_TableToolbar = require("./TableToolbar.js");
 const require_index = require("../OverflowMenu/index.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
@@ -24,13 +25,16 @@ let _carbon_icons_react = require("@carbon/icons-react");
 * LICENSE file in the root directory of this source tree.
 */
 const defaultIconDescription = "Settings";
-const TableToolbarMenu = ({ className, renderIcon = _carbon_icons_react.Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, ...rest }) => {
+const TableToolbarMenu = ({ className, renderIcon = _carbon_icons_react.Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, size: sizeProp, ...rest }) => {
+	const toolbarContext = require_TableToolbar.useTableToolbar();
+	const size = sizeProp ?? toolbarContext.size;
 	const prefix = require_usePrefix.usePrefix();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 		renderIcon,
 		className: (0, classnames.default)(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`),
 		iconDescription,
 		menuOptionsClass: (0, classnames.default)(menuOptionsClass, `${prefix}--toolbar-action__menu`),
+		size,
 		flipped: true,
 		...rest,
 		children
@@ -41,7 +45,13 @@ TableToolbarMenu.propTypes = {
 	className: prop_types.default.string,
 	iconDescription: prop_types.default.string,
 	menuOptionsClass: prop_types.default.string,
-	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
+	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	])
 };
 //#endregion
 exports.default = TableToolbarMenu;

package/lib/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/lib/components/DataTable/TableToolbarSearch.js

@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
 const require_noopFn = require("../../internal/noopFn.js");
 const require_index = require("../Search/index.js");
+const require_TableToolbar = require("./TableToolbar.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -35,7 +36,9 @@ const defaultTranslations = {
 const defaultTranslateWithId = (messageId) => {
 	return defaultTranslations[messageId];
 };
-const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = require_noopFn.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 = require_noopFn.noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size: sizeProp, tabIndex = "0", ...rest }) => {
+	const toolbarContext = require_TableToolbar.useTableToolbar();
+	const size = sizeProp ?? toolbarContext.size;
 	const { current: controlled } = (0, react.useRef)(expandedProp !== void 0);
 	const [expandedState, setExpandedState] = (0, react.useState)(Boolean(defaultExpanded || defaultValue));
 	const expanded = controlled ? expandedProp : expandedState;
@@ -104,6 +107,7 @@ TableToolbarSearch.propTypes = {
 	placeholder: prop_types.default.string,
 	searchContainerClass: prop_types.default.string,
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"