@carbon/react 1.108.0-rc.0 → 1.109.0-rc.0

package/es/components/Button/ButtonBase.js

@@ -17,7 +17,7 @@ import { jsx } from "react/jsx-runtime";
 * 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 ButtonBase = React.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "danger", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
+const ButtonBase = React.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
 	const prefix = usePrefix();
 	const commonProps = {
 		tabIndex,
@@ -43,23 +43,23 @@ const ButtonBase = React.forwardRef(function ButtonBase({ as, children, classNam
 		className: `${prefix}--btn__icon`,
 		"aria-hidden": "true"
 	});
-	const dangerButtonVariants = [
+	const hasDangerDescription = [
 		"danger",
 		"danger--tertiary",
 		"danger--ghost"
-	];
+	].includes(kind) && Boolean(dangerDescription);
 	let component = "button";
 	const assistiveId = useId("danger-description");
 	const { "aria-pressed": ariaPressed, "aria-describedby": ariaDescribedBy } = rest;
 	let otherProps = {
 		disabled,
 		type,
-		"aria-describedby": dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || void 0,
+		"aria-describedby": hasDangerDescription ? assistiveId : ariaDescribedBy || void 0,
 		"aria-pressed": ariaPressed ?? (hasIconOnly && kind === "ghost" ? isSelected : void 0)
 	};
 	const anchorProps = { href };
 	let assistiveText = null;
-	if (dangerButtonVariants.includes(kind)) assistiveText = /* @__PURE__ */ jsx("span", {
+	if (hasDangerDescription) assistiveText = /* @__PURE__ */ jsx("span", {
 		id: assistiveId,
 		className: `${prefix}--visually-hidden`,
 		children: dangerDescription

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/ModalFooter.d.ts

@@ -36,6 +36,11 @@ export interface ModalFooterProps {
      * Note that this prop is not applied if you render primary/danger button by yourself
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * The `ref` callback for the primary button.
      */

package/es/components/ComposedModal/ModalFooter.js

@@ -61,7 +61,7 @@ SecondaryButtonSet.propTypes = {
 	},
 	secondaryClassName: PropTypes.string
 };
-const ModalFooter = React.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = noopFn, danger, inputref, onRequestClose = noopFn, onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, ...rest }, ref) {
+const ModalFooter = React.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = noopFn, danger, dangerDescription = "", inputref, onRequestClose = noopFn, onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, ...rest }, ref) {
 	const prefix = usePrefix();
 	const footerClass = classNames(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
 	const primaryButtonClass = classNames(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
@@ -85,6 +85,7 @@ const ModalFooter = React.forwardRef(function ModalFooter({ children, className:
 				onClick: onRequestSubmit,
 				className: primaryButtonClass,
 				disabled: loadingActive || primaryButtonDisabled,
+				dangerDescription,
 				kind: danger ? "danger" : "primary",
 				ref: inputref,
 				children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ jsx(InlineLoading_default, {
@@ -104,6 +105,7 @@ ModalFooter.propTypes = {
 	className: PropTypes.string,
 	closeModal: PropTypes.func,
 	danger: PropTypes.bool,
+	dangerDescription: PropTypes.string,
 	inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
 	loadingDescription: PropTypes.string,
 	loadingIconDescription: PropTypes.string,

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/Dialog/Dialog.d.ts

@@ -232,6 +232,11 @@ interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Dialog is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * Specify loading status
      */

package/es/components/Dialog/Dialog.js

@@ -248,7 +248,7 @@ DialogBody.propTypes = {
 	className: PropTypes.string,
 	hasScrollingContent: PropTypes.bool
 };
-const DialogFooter = React.forwardRef(({ children, className, onRequestClose = noopFn, onSecondarySubmit, onRequestSubmit = noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, danger = false, ...rest }, ref) => {
+const DialogFooter = React.forwardRef(({ children, className, onRequestClose = noopFn, onSecondarySubmit, onRequestSubmit = noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, danger = false, dangerDescription = "", ...rest }, ref) => {
 	const prefix = usePrefix();
 	const button = useRef(null);
 	const { isOpen } = useContext(DialogContext);
@@ -296,6 +296,7 @@ const DialogFooter = React.forwardRef(({ children, className, onRequestClose = n
 		}), /* @__PURE__ */ jsx(Button_default, {
 			className: primaryButtonClass,
 			kind: danger ? "danger" : "primary",
+			dangerDescription,
 			disabled: loadingActive || primaryButtonDisabled,
 			onClick: onRequestSubmit,
 			ref: button,
@@ -333,6 +334,7 @@ DialogFooter.propTypes = {
 		return null;
 	},
 	danger: PropTypes.bool,
+	dangerDescription: PropTypes.string,
 	loadingStatus: PropTypes.oneOf([
 		"inactive",
 		"active",

package/es/components/Menu/MenuItem.js

@@ -29,7 +29,7 @@ import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, useFloatin
 * 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 MenuItem = forwardRef(function MenuItem({ children, className, dangerDescription = "danger", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
+const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescription = "", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
 	const [submenuOpen, setSubmenuOpen] = useState(false);
 	const [rtl, setRtl] = useState(false);
 	const { refs, floatingStyles, context: floatingContext } = useFloating({
@@ -67,6 +67,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 	const hasChildren = React.Children.toArray(children).length > 0;
 	const isDisabled = disabled && !hasChildren;
 	const isDanger = kind === "danger" && !hasChildren;
+	const hasDangerDescription = isDanger && Boolean(dangerDescription);
 	function registerItem() {
 		context.dispatch({
 			type: "registerItem",
@@ -169,7 +170,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 					className: `${prefix}--menu-item__label`,
 					children: label
 				}),
-				isDanger && /* @__PURE__ */ jsx("span", {
+				hasDangerDescription && /* @__PURE__ */ jsx("span", {
 					id: assistiveId,
 					className: `${prefix}--visually-hidden`,
 					children: dangerDescription

package/es/components/Modal/Modal.d.ts

@@ -38,6 +38,11 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Modal is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
      */

package/es/components/Modal/Modal.js

@@ -33,7 +33,7 @@ import { isTopmostVisibleModal } from "./isTopmostVisibleModal.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";
@@ -73,7 +73,7 @@ const Modal = React.forwardRef(function Modal({ open, ...props }, ref) {
 		...props
 	});
 });
-const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = noopFn, onRequestSubmit = noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, slug, ...rest }, ref) {
+const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = noopFn, onRequestSubmit = noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, dangerDescription = "", alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, slug, ...rest }, ref) {
 	const prefix = usePrefix();
 	const button = useRef(null);
 	const secondaryButton = useRef(null);
@@ -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
@@ -362,6 +369,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 				}), /* @__PURE__ */ jsx(Button_default, {
 					className: primaryButtonClass,
 					kind: danger ? "danger" : "primary",
+					dangerDescription,
 					disabled: loadingActive || primaryButtonDisabled,
 					onClick: onRequestSubmit,
 					ref: button,
@@ -438,6 +446,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 					}), /* @__PURE__ */ jsx(Button_default, {
 						className: primaryButtonClass,
 						kind: danger ? "danger" : "primary",
+						dangerDescription,
 						disabled: loadingActive || primaryButtonDisabled,
 						onClick: onRequestSubmit,
 						ref: button,
@@ -480,6 +489,7 @@ Modal.propTypes = {
 	className: PropTypes.string,
 	closeButtonLabel: PropTypes.string,
 	danger: PropTypes.bool,
+	dangerDescription: PropTypes.string,
 	decorator: PropTypes.node,
 	hasScrollingContent: PropTypes.bool,
 	id: PropTypes.string,

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -23,7 +23,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const OverflowMenuItem = forwardRef((props, ref) => {
-	const { className, closeMenu, dangerDescription = "danger", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
+	const { className, closeMenu, dangerDescription = "", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
 	const prefix = usePrefix();
 	function setTabFocus(evt) {
 		if (match(evt, ArrowDown)) handleOverflowMenuItemFocus?.({
@@ -47,13 +47,14 @@ const OverflowMenuItem = forwardRef((props, ref) => {
 		[`${prefix}--overflow-menu-options__option--disabled`]: disabled
 	}, wrapperClassName);
 	const TagToUse = href ? "a" : "button";
+	const hasDangerDescription = isDelete && Boolean(dangerDescription);
 	const assistiveId = useId("danger-description");
 	const OverflowMenuItemContent = (() => {
 		if (typeof itemText !== "string") return itemText;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 			className: `${prefix}--overflow-menu-options__option-content`,
 			children: itemText
-		}), isDelete && /* @__PURE__ */ jsx("span", {
+		}), hasDangerDescription && /* @__PURE__ */ jsx("span", {
 			id: assistiveId,
 			className: `${prefix}--visually-hidden`,
 			children: dangerDescription

package/es/components/Tabs/Tabs.d.ts

@@ -192,8 +192,12 @@ export interface TabListProps extends DivAttributes {
      * on component rerender
      */
     scrollIntoView?: boolean;
+    /**
+     * Specify the size of the tabs.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, size, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabList {
     var propTypes: {
         /**