@carbon/react 1.108.0 → 1.109.0-rc.0

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"

package/lib/components/Modal/Modal.js

@@ -171,11 +171,18 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		[`${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] = (0, react.useState)(currentScrollHeight > currentClientHeight);
+	(0, react.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 = (0, classnames.default)(`${prefix}--modal-content`, {
 		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300

package/lib/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';

package/lib/index.js

@@ -83,6 +83,7 @@ const require_TableExpandedRow = require("./components/DataTable/TableExpandedRo
 const require_TableHead = require("./components/DataTable/TableHead.js");
 const require_TableHeader = require("./components/DataTable/TableHeader.js");
 const require_TableRow = require("./components/DataTable/TableRow.js");
+const require_InlineCheckbox = require("./components/InlineCheckbox/InlineCheckbox.js");
 const require_TableSelectAll = require("./components/DataTable/TableSelectAll.js");
 const require_RadioButton = require("./components/RadioButton/RadioButton.js");
 const require_TableSelectRow = require("./components/DataTable/TableSelectRow.js");
@@ -366,6 +367,7 @@ exports.IconSkeleton = require_Icon_Skeleton.default || require_Icon_Skeleton;
 exports.IconSwitch = require_IconSwitch.default || require_IconSwitch;
 exports.IconTab = require_Tabs.IconTab;
 exports.IdPrefix = require_index$13.IdPrefix;
+exports.InlineCheckbox = require_InlineCheckbox.default || require_InlineCheckbox;
 exports.InlineLoading = require_InlineLoading.default || require_InlineLoading;
 exports.InlineNotification = require_Notification.InlineNotification;
 exports.Layer = require_index$8.Layer;

package/lib/internal/FloatingMenu.js

@@ -116,7 +116,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);
@@ -128,8 +131,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.108.0",
+  "version": "1.109.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/icons-react": "^11.81.0",
+    "@carbon/icons-react": "^11.82.0-rc.0",
     "@carbon/layout": "^11.53.0",
-    "@carbon/styles": "^1.107.0",
+    "@carbon/styles": "^1.108.0-rc.0",
     "@carbon/utilities": "^0.20.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -79,8 +79,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.74.0",
-    "@figma/code-connect": "^1.4.2",
+    "@carbon/themes": "^11.75.0-rc.0",
+    "@figma/code-connect": "^1.4.5",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "2d98f4ee9914fa44acba58f62599c3f5382acad0"
+  "gitHead": "b23ca747c33b76557a54aa88b6df70bc76f55da9"
 }