@carbon/react 1.111.1 → 1.112.0-rc.0

package/es/components/Tabs/Tabs.js

@@ -930,7 +930,7 @@ function TabPanels({ children }) {
 		const isVertical = tabContainer?.classList.contains(`${prefix}--tabs--vertical`);
 		const parentHasHeight = tabContainer?.parentElement?.style.height;
 		if (isVertical && !parentHasHeight) {
-			hiddenStates.current = refs.current.map((ref) => ref?.hidden || false);
+			hiddenStates.current = refs.current.map((ref) => ref?.hasAttribute("hidden") || false);
 			refs.current.forEach((ref) => {
 				if (ref) ref.hidden = false;
 			});

package/es/components/Tooltip/DefinitionTooltip.js

@@ -6,7 +6,7 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Escape } from "../../internal/keyboard/keys.js";
+import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
@@ -27,7 +27,10 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 	const prefix = usePrefix();
 	const tooltipId = useFallbackId(id);
 	function onKeyDown(event) {
-		if (isOpen && match(event, Escape)) {
+		if (match(event, Enter) || match(event, Space)) {
+			event.preventDefault();
+			setOpen(!isOpen);
+		} else if (isOpen && match(event, Escape)) {
 			event.stopPropagation();
 			setOpen(false);
 		}

package/es/internal/index.d.ts

@@ -1,8 +1,9 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 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 * from './defaultItemToString';
+export * from './isItemDisabled';
 export * from './utils';

package/es/internal/isItemDisabled.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 isItemDisabled: (item: unknown) => boolean;

package/es/internal/isItemDisabled.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//#region src/internal/isItemDisabled.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 isItemDisabled = (item) => item !== null && typeof item === "object" && "disabled" in item && item.disabled === true;
+//#endregion
+export { isItemDisabled };

package/lib/components/ComboBox/ComboBox.js

@@ -13,6 +13,7 @@ const require_match = require("../../internal/keyboard/match.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
+const require_isItemDisabled = require("../../internal/isItemDisabled.js");
 const require_utils = require("../../internal/utils.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
@@ -44,7 +45,6 @@ react_fast_compare = require_runtime.__toESM(react_fast_compare);
 */
 const { InputBlur, InputKeyDownEnter, FunctionToggleMenu, ToggleButtonClick, ItemMouseMove, InputKeyDownArrowUp, InputKeyDownArrowDown, MenuMouseLeave, ItemClick, FunctionSelectItem } = downshift.useCombobox.stateChangeTypes;
 const defaultShouldFilterItem = () => true;
-const isDisabledItem = (item) => item !== null && typeof item === "object" && "disabled" in item && Boolean(item.disabled);
 const autocompleteCustomFilter = ({ item, inputValue }) => {
 	if (inputValue === null || inputValue === "") return true;
 	const lowercaseItem = item.toLowerCase();
@@ -61,7 +61,7 @@ const findHighlightedIndex = ({ items, itemToString = require_defaultItemToStrin
 	const searchValue = inputValue.toLowerCase();
 	for (let i = 0; i < items.length; i++) {
 		const item = itemToString(items[i]).toLowerCase();
-		if (!isDisabledItem(items[i]) && item.indexOf(searchValue) !== -1) return i;
+		if (!require_isItemDisabled.isItemDisabled(items[i]) && item.indexOf(searchValue) !== -1) return i;
 	}
 	return -1;
 };
@@ -104,7 +104,7 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 	(0, react.useEffect)(() => {
 		if (typeahead) {
 			if (inputValue.length >= prevInputLengthRef.current) if (inputValue) {
-				const filteredItems = items.filter((item) => !isDisabledItem(item) && autocompleteCustomFilter({
+				const filteredItems = items.filter((item) => !require_isItemDisabled.isItemDisabled(item) && autocompleteCustomFilter({
 					item: itemToString(item),
 					inputValue
 				}));
@@ -226,7 +226,7 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 			case InputKeyDownEnter:
 				if (!allowCustomValue) if (state.highlightedIndex !== -1) {
 					const highlightedItem = filterItems(items, itemToString, inputValue)[state.highlightedIndex];
-					if (highlightedItem && !isDisabledItem(highlightedItem)) return {
+					if (highlightedItem && !require_isItemDisabled.isItemDisabled(highlightedItem)) return {
 						...changes,
 						selectedItem: highlightedItem,
 						inputValue: itemToString(highlightedItem)
@@ -235,7 +235,7 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 					const autoIndex = indexToHighlight(inputValue);
 					if (autoIndex !== -1) {
 						const matchingItem = items[autoIndex];
-						if (matchingItem && !isDisabledItem(matchingItem)) return {
+						if (matchingItem && !require_isItemDisabled.isItemDisabled(matchingItem)) return {
 							...changes,
 							selectedItem: matchingItem,
 							inputValue: itemToString(matchingItem)
@@ -357,7 +357,7 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 		initialSelectedItem,
 		inputId: id,
 		stateReducer,
-		isItemDisabled: isDisabledItem,
+		isItemDisabled: require_isItemDisabled.isItemDisabled,
 		...downshiftProps,
 		onStateChange: ({ type, selectedItem: newSelectedItem }) => {
 			if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
@@ -544,7 +544,7 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
 										}
 										if (typeahead && event.key === "Tab") {
 											if (!isOpen) return;
-											const matchingItem = items.find((item) => !isDisabledItem(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
+											const matchingItem = items.find((item) => !require_isItemDisabled.isItemDisabled(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
 											if (matchingItem) {
 												downshiftSetInputValue(itemToString(matchingItem));
 												selectItem(matchingItem);

package/lib/components/Dropdown/Dropdown.js

@@ -9,6 +9,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
+const require_isItemDisabled = require("../../internal/isItemDisabled.js");
 const require_utils = require("../../internal/utils.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
@@ -103,9 +104,6 @@ const Dropdown = react.default.forwardRef(({ autoAlign = false, className: conta
 	const onSelectedItemChange = (0, react.useCallback)(({ selectedItem }) => {
 		if (onChange) onChange({ selectedItem: selectedItem ?? null });
 	}, [onChange]);
-	const isItemDisabled = (0, react.useCallback)((item) => {
-		return item !== null && typeof item === "object" && "disabled" in item && item.disabled === true;
-	}, []);
 	const onHighlightedIndexChange = (0, react.useCallback)((changes) => {
 		const { highlightedIndex } = changes;
 		if (highlightedIndex !== void 0 && highlightedIndex > -1) {
@@ -123,7 +121,7 @@ const Dropdown = react.default.forwardRef(({ autoAlign = false, className: conta
 		initialSelectedItem,
 		onSelectedItemChange,
 		stateReducer,
-		isItemDisabled,
+		isItemDisabled: require_isItemDisabled.isItemDisabled,
 		onHighlightedIndexChange,
 		...downshiftProps
 	}), [
@@ -132,7 +130,6 @@ const Dropdown = react.default.forwardRef(({ autoAlign = false, className: conta
 		initialSelectedItem,
 		onSelectedItemChange,
 		stateReducer,
-		isItemDisabled,
 		onHighlightedIndexChange,
 		downshiftProps
 	]);

package/lib/components/FeatureFlags/index.js

@@ -25,27 +25,45 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * or disable feature flags in a given React tree
 */
 const FeatureFlagContext = (0, react.createContext)(_carbon_feature_flags.FeatureFlags);
+const PROP_TO_FLAG = {
+	enableV12TileDefaultIcons: "enable-v12-tile-default-icons",
+	enableV12TileRadioIcons: "enable-v12-tile-radio-icons",
+	enableV12Overflowmenu: "enable-v12-overflowmenu",
+	enableTreeviewControllable: "enable-treeview-controllable",
+	enableExperimentalFocusWrapWithoutSentinels: "enable-experimental-focus-wrap-without-sentinels",
+	enableFocusWrapWithoutSentinels: "enable-focus-wrap-without-sentinels",
+	enableDialogElement: "enable-dialog-element",
+	enableV12DynamicFloatingStyles: "enable-v12-dynamic-floating-styles",
+	enableEnhancedFileUploader: "enable-enhanced-file-uploader",
+	enablePresence: "enable-presence"
+};
 /**
 * Supports an object of feature flag values with the `flags` prop, merging them
 * along with the current `FeatureFlagContext` to provide consumers to check if
 * a feature flag is enabled or disabled in a given React tree
 */
-const FeatureFlags = ({ children, flags = {}, enableV12TileDefaultIcons = false, enableV12TileRadioIcons = false, enableV12Overflowmenu = false, enableTreeviewControllable = false, enableExperimentalFocusWrapWithoutSentinels = false, enableFocusWrapWithoutSentinels = false, enableDialogElement = false, enableV12DynamicFloatingStyles = false, enableEnhancedFileUploader = false, enablePresence = false }) => {
+const FeatureFlags = ({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
 	const parentScope = (0, react.useContext)(FeatureFlagContext);
 	const scope = (0, react.useMemo)(() => {
-		const scope = (0, _carbon_feature_flags.createScope)({
-			"enable-v12-tile-default-icons": enableV12TileDefaultIcons,
-			"enable-v12-tile-radio-icons": enableV12TileRadioIcons,
-			"enable-v12-overflowmenu": enableV12Overflowmenu,
-			"enable-treeview-controllable": enableTreeviewControllable,
-			"enable-experimental-focus-wrap-without-sentinels": enableExperimentalFocusWrapWithoutSentinels,
-			"enable-focus-wrap-without-sentinels": enableFocusWrapWithoutSentinels,
-			"enable-dialog-element": enableDialogElement,
-			"enable-v12-dynamic-floating-styles": enableV12DynamicFloatingStyles,
-			"enable-enhanced-file-uploader": enableEnhancedFileUploader,
-			"enable-presence": enablePresence,
-			...flags
-		});
+		const flagProps = {
+			enableV12TileDefaultIcons,
+			enableV12TileRadioIcons,
+			enableV12Overflowmenu,
+			enableTreeviewControllable,
+			enableExperimentalFocusWrapWithoutSentinels,
+			enableFocusWrapWithoutSentinels,
+			enableDialogElement,
+			enableV12DynamicFloatingStyles,
+			enableEnhancedFileUploader,
+			enablePresence
+		};
+		const explicitFlags = {};
+		for (const [prop, flagKey] of Object.entries(PROP_TO_FLAG)) {
+			const value = flagProps[prop];
+			if (value !== void 0) explicitFlags[flagKey] = value;
+		}
+		if (flags) Object.assign(explicitFlags, flags);
+		const scope = (0, _carbon_feature_flags.createScope)(explicitFlags);
 		scope.mergeWithScope(parentScope);
 		return scope;
 	}, [

package/lib/components/IconIndicator/index.d.ts

@@ -5,13 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-export declare const IconIndicatorKinds: string[];
+import { PopoverAlignment } from '../Popover';
+declare const iconTypes: {
+    readonly failed: import("@carbon/icons-react").CarbonIconType;
+    readonly 'caution-major': import("@carbon/icons-react").CarbonIconType;
+    readonly 'caution-minor': import("@carbon/icons-react").CarbonIconType;
+    readonly undefined: import("@carbon/icons-react").CarbonIconType;
+    readonly succeeded: import("@carbon/icons-react").CarbonIconType;
+    readonly normal: import("@carbon/icons-react").CarbonIconType;
+    readonly 'in-progress': import("@carbon/icons-react").CarbonIconType;
+    readonly incomplete: import("@carbon/icons-react").CarbonIconType;
+    readonly 'not-started': import("@carbon/icons-react").CarbonIconType;
+    readonly pending: import("@carbon/icons-react").CarbonIconType;
+    readonly unknown: import("@carbon/icons-react").CarbonIconType;
+    readonly informative: import("@carbon/icons-react").CarbonIconType;
+};
+export declare const IconIndicatorKinds: (keyof typeof iconTypes)[];
 export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
 export interface IconIndicatorProps {
+    /**
+     * Specify how the tooltip should align with the icon in compact mode
+     */
+    align?: PopoverAlignment;
+    /**
+     * Will auto-align the tooltip in compact mode.
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * When true, displays only the icon with the label in a tooltip
+     */
+    compact?: boolean;
+    /**
+     * Description for the icon announced to screen readers in compact mode.
+     * Defaults to `label` when not provided.
+     */
+    iconDescription?: string;
     /**
      * Specify the kind of icon to be used
      */

package/lib/components/IconIndicator/index.js

@@ -7,6 +7,7 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_DefinitionTooltip = require("../Tooltip/DefinitionTooltip.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -22,54 +23,82 @@ let _carbon_icons_react = require("@carbon/icons-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 IconIndicatorKinds = [
-	"failed",
-	"caution-major",
-	"caution-minor",
-	"undefined",
-	"succeeded",
-	"normal",
-	"in-progress",
-	"incomplete",
-	"not-started",
-	"pending",
-	"unknown",
-	"informative"
-];
 const iconTypes = {
 	failed: _carbon_icons_react.ErrorFilled,
-	["caution-major"]: _carbon_icons_react.WarningAltInvertedFilled,
-	["caution-minor"]: _carbon_icons_react.WarningAltFilled,
+	"caution-major": _carbon_icons_react.WarningAltInvertedFilled,
+	"caution-minor": _carbon_icons_react.WarningAltFilled,
 	undefined: _carbon_icons_react.UndefinedFilled,
 	succeeded: _carbon_icons_react.CheckmarkFilled,
 	normal: _carbon_icons_react.CheckmarkOutline,
-	["in-progress"]: _carbon_icons_react.InProgress,
+	"in-progress": _carbon_icons_react.InProgress,
 	incomplete: _carbon_icons_react.Incomplete,
-	["not-started"]: _carbon_icons_react.CircleDash,
+	"not-started": _carbon_icons_react.CircleDash,
 	pending: _carbon_icons_react.PendingFilled,
 	unknown: _carbon_icons_react.UnknownFilled,
 	informative: _carbon_icons_react.WarningSquareFilled
 };
-const IconIndicator = react.default.forwardRef(({ className: customClassName, kind, label, size = 16 }, ref) => {
+const IconIndicatorKinds = Object.keys(iconTypes);
+const IconIndicator = react.default.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, iconDescription, kind, label, size = 16 }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
-	const classNames = (0, classnames.default)(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size == 20 });
+	const classNames = (0, classnames.default)(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size === 20 });
 	const IconForKind = iconTypes[kind];
 	if (!IconForKind) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const iconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconForKind, {
+		size,
+		className: `${prefix}--icon-indicator--${kind}`
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: classNames,
 		ref,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconForKind, {
-			size,
-			className: `${prefix}--icon-indicator--${kind}`
-		}), label]
+		children: compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DefinitionTooltip.DefinitionTooltip, {
+			align,
+			autoAlign,
+			openOnHover: true,
+			definition: label,
+			triggerClassName: `${prefix}--icon-indicator__button`,
+			children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefix}--visually-hidden`,
+				children: iconDescription ?? label
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [iconElement, label] })
 	});
 });
 IconIndicator.propTypes = {
+	/**
+	* Specify how the tooltip should align with the icon in compact mode
+	*/
+	align: prop_types.default.oneOf([
+		"top",
+		"top-start",
+		"top-end",
+		"bottom",
+		"bottom-start",
+		"bottom-end",
+		"left",
+		"left-start",
+		"left-end",
+		"right",
+		"right-start",
+		"right-end"
+	]),
+	/**
+	* Will auto-align the tooltip in compact mode
+	*/
+	autoAlign: prop_types.default.bool,
 	/**
 	* Specify an optional className to add.
 	*/
 	className: prop_types.default.string,
 	/**
+	* When true, displays only the icon with the label in a tooltip
+	*/
+	compact: prop_types.default.bool,
+	/**
+	* Description for the icon announced to screen readers in compact mode.
+	* Defaults to `label` when not provided.
+	*/
+	iconDescription: prop_types.default.string,
+	/**
 	* Specify the kind of the Icon Indicator
 	*/
 	kind: prop_types.default.oneOf(IconIndicatorKinds).isRequired,

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -13,6 +13,7 @@ const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
+const require_isItemDisabled = require("../../internal/isItemDisabled.js");
 const require_utils = require("../../internal/utils.js");
 const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
@@ -78,7 +79,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		filteredItems
 	});
 	const selectAllStatus = (0, react.useMemo)(() => {
-		const selectable = nonSelectAllItems.filter((item) => !item.disabled);
+		const selectable = nonSelectAllItems.filter((item) => !require_isItemDisabled.isItemDisabled(item));
 		const nonSelectedCount = selectable.filter((item) => !controlledSelectedItems.some((sel) => (0, react_fast_compare.default)(sel, item))).length;
 		const totalCount = selectable.length;
 		return {
@@ -87,7 +88,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		};
 	}, [controlledSelectedItems, nonSelectAllItems]);
 	const handleSelectAllClick = (0, react.useCallback)(() => {
-		const selectable = nonSelectAllItems.filter((i) => !i.disabled);
+		const selectable = nonSelectAllItems.filter((item) => !require_isItemDisabled.isItemDisabled(item));
 		const { checked, indeterminate } = selectAllStatus;
 		if (checked || indeterminate) toggleAll(controlledSelectedItems.filter((sel) => !filteredItems.some((e) => (0, react_fast_compare.default)(e, sel))));
 		else {
@@ -137,7 +138,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 	}, [open]);
 	const sortedItems = (0, react.useMemo)(() => {
 		const selectAllItem = items.find(require_isSelectAllItem.isSelectAllItem);
-		const selectableRealItems = nonSelectAllItems.filter((item) => !item.disabled);
+		const selectableRealItems = nonSelectAllItems.filter((item) => !require_isItemDisabled.isItemDisabled(item));
 		const sortedReal = sortItems(nonSelectAllItems, {
 			selectedItems: {
 				top: controlledSelectedItems,
@@ -261,9 +262,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		inputId,
 		inputValue,
 		stateReducer,
-		isItemDisabled(item) {
-			return item?.disabled;
-		}
+		isItemDisabled: require_isItemDisabled.isItemDisabled
 	});
 	function stateReducer(state, actionAndChanges) {
 		const { type, props, changes } = actionAndChanges;
@@ -272,7 +271,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		switch (type) {
 			case InputKeyDownEnter:
 				if (sortedItems.length === 0) return changes;
-				if (changes.selectedItem && changes.selectedItem.disabled !== true) if (require_isSelectAllItem.isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
+				if (changes.selectedItem && !require_isItemDisabled.isItemDisabled(changes.selectedItem)) if (require_isSelectAllItem.isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return {

package/lib/components/MultiSelect/MultiSelect.js

@@ -14,6 +14,7 @@ const require_useId = require("../../internal/useId.js");
 const require_noopFn = require("../../internal/noopFn.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
+const require_isItemDisabled = require("../../internal/isItemDisabled.js");
 const require_utils = require("../../internal/utils.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
@@ -119,9 +120,7 @@ const MultiSelect = react.default.forwardRef(({ autoAlign = false, className: co
 		},
 		selectedItem: controlledSelectedItems,
 		items: filteredItems,
-		isItemDisabled(item) {
-			return item?.disabled;
-		},
+		isItemDisabled: require_isItemDisabled.isItemDisabled,
 		...downshiftProps
 	});
 	const toggleButtonProps = getToggleButtonProps({
@@ -303,7 +302,7 @@ const MultiSelect = react.default.forwardRef(({ autoAlign = false, className: co
 		return {
 			hasIndividualSelections: selectedItems.some((selected) => !require_isSelectAllItem.isSelectAllItem(selected)),
 			nonSelectAllSelectedCount: selectedItems.filter((selected) => !require_isSelectAllItem.isSelectAllItem(selected)).length,
-			totalSelectableCount: filteredItems.filter((item) => !require_isSelectAllItem.isSelectAllItem(item) && !item.disabled).length
+			totalSelectableCount: filteredItems.filter((item) => !require_isSelectAllItem.isSelectAllItem(item) && !require_isItemDisabled.isItemDisabled(item)).length
 		};
 	}, [selectedItems, filteredItems]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -86,7 +86,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
 		};
 	}
 };
-const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel = null, ariaLabel: deprecatedAriaLabel, children, className, direction = require_FloatingMenu.DIRECTION_BOTTOM, flipped = false, focusTrap = false, iconClass, iconDescription = "Options", id, light, menuOffset = getMenuOffset, menuOffsetFlip = getMenuOffset, menuOptionsClass, onClick = require_noopFn.noopFn, onClose = require_noopFn.noopFn, onOpen = require_noopFn.noopFn, open: openProp, renderIcon: IconElement = _carbon_icons_react.OverflowMenuVertical, selectorPrimaryFocus = "[data-floating-menu-primary-focus]", size = "md", innerRef, ...other }, ref) => {
+const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel = null, ariaLabel: deprecatedAriaLabel, children, className, direction = require_FloatingMenu.DIRECTION_BOTTOM, flipped = false, focusTrap = false, iconClass, iconDescription = "Options", id, light, menuOffset = getMenuOffset, menuOffsetFlip = getMenuOffset, menuOptionsClass, onClick = require_noopFn.noopFn, onClose = require_noopFn.noopFn, onOpen = require_noopFn.noopFn, open: openProp, renderIcon: IconElement = _carbon_icons_react.OverflowMenuVertical, selectorPrimaryFocus = "[data-floating-menu-primary-focus]", size, innerRef, ...other }, ref) => {
 	const prefix = (0, react.useContext)(require_usePrefix.PrefixContext);
 	const [open, setOpen] = (0, react.useState)(openProp ?? false);
 	const [click, setClick] = (0, react.useState)(false);
@@ -101,6 +101,8 @@ const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel =
 	/** The element ref of the tooltip's trigger button. */
 	const triggerRef = (0, react.useRef)(null);
 	const wrapperRef = (0, react.useRef)(null);
+	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
+	const resizeObserverRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		if (prevOpenProp.current !== openProp) {
 			setOpen(!!openProp);
@@ -110,6 +112,26 @@ const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel =
 	(0, react.useEffect)(() => {
 		if (triggerRef.current) setHasMountedTrigger(true);
 	}, []);
+	/**
+	* When `size` is brought in from a contextual layout token, FloatingMenu can't detect size changes
+	* while the menu is open since there is no state/prop update. This ResizeObserver watches
+	* the trigger button when the menu is open and calls `forceUpdate()` on resize to force a re-render if its
+	* size changes while the menu is open
+	*/
+	(0, react.useEffect)(() => {
+		resizeObserverRef.current = new ResizeObserver(() => {
+			forceUpdate();
+		});
+		return () => {
+			resizeObserverRef.current?.disconnect();
+			resizeObserverRef.current = null;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!triggerRef.current || !resizeObserverRef.current) return;
+		if (open) resizeObserverRef.current.observe(triggerRef.current);
+		else resizeObserverRef.current.disconnect();
+	}, [open]);
 	(0, react.useEffect)(() => {
 		if (open && !prevOpenState.current) onOpen();
 		else if (!open && prevOpenState.current) onClose();
@@ -210,22 +232,25 @@ const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel =
 	};
 	const getTarget = () => {
 		const triggerEl = triggerRef.current;
-		if (triggerEl instanceof Element) return triggerEl.closest("[data-floating-menu-container]") || document.body;
+		if (triggerEl instanceof Element) return triggerEl.closest("[data-floating-menu-container]") || triggerEl.closest(`.${prefix}--layout`) || document.body;
 		return document.body;
 	};
 	const menuBodyId = `overflow-menu-${instanceId.current}__menu-body`;
 	const overflowMenuClasses = (0, classnames.default)(className, `${prefix}--overflow-menu`, {
 		[`${prefix}--overflow-menu--open`]: open,
 		[`${prefix}--overflow-menu--light`]: light,
-		[`${prefix}--overflow-menu--${size}`]: size
+		[`${prefix}--overflow-menu--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
 	const overflowMenuOptionsClasses = (0, classnames.default)(menuOptionsClass, `${prefix}--overflow-menu-options`, {
 		[`${prefix}--overflow-menu--flip`]: flipped,
 		[`${prefix}--overflow-menu-options--open`]: open,
 		[`${prefix}--overflow-menu-options--light`]: light,
-		[`${prefix}--overflow-menu-options--${size}`]: size
+		[`${prefix}--overflow-menu-options--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
 	const overflowMenuIconClasses = (0, classnames.default)(`${prefix}--overflow-menu__icon`, iconClass);
+	const overflowMenuWrapperClasses = (0, classnames.default)(`${prefix}--overflow-menu__wrapper`);
 	const childrenWithProps = react.Children.toArray(children).map((child, index) => {
 		if ((0, react.isValidElement)(child)) {
 			const childElement = child;
@@ -262,7 +287,7 @@ const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel =
 	});
 	const combinedRef = innerRef ? require_mergeRefs.mergeRefs(triggerRef, innerRef, ref) : require_mergeRefs.mergeRefs(triggerRef, ref);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: `${prefix}--overflow-menu__wrapper`,
+		className: overflowMenuWrapperClasses,
 		"aria-owns": open ? menuBodyId : void 0,
 		ref: wrapperRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {

package/lib/components/OverflowMenu/next/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2025
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/OverflowMenu/next/index.js

@@ -26,7 +26,7 @@ let _carbon_icons_react = require("@carbon/icons-react");
 let _floating_ui_react = require("@floating-ui/react");
 //#region src/components/OverflowMenu/next/index.tsx
 /**
-* Copyright IBM Corp. 2020, 2025
+* Copyright IBM Corp. 2020, 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.
@@ -71,7 +71,7 @@ const OverflowMenu = react.default.forwardRef(({ autoAlign = false, children, cl
 	}
 	const containerClasses = (0, classnames.default)(className, `${prefix}--overflow-menu__container`, { [`${prefix}--autoalign`]: enableFloatingStyles });
 	const menuClasses = (0, classnames.default)(`${prefix}--overflow-menu__${menuAlignment}`);
-	const triggerClasses = (0, classnames.default)(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+	const triggerClasses = (0, classnames.default)(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`, size !== defaultSize && `${prefix}--layout--size-${size}`);
 	const floatingRef = require_mergeRefs.mergeRefs(triggerRef, refs.setReference);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...rest,

package/lib/components/ShapeIndicator/index.d.ts

@@ -5,13 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { PopoverAlignment } from '../Popover';
 export declare const ShapeIndicatorKinds: string[];
 export type ShapeIndicatorKind = (typeof ShapeIndicatorKinds)[number];
 export interface ShapeIndicatorProps {
+    /**
+     * Specify how the tooltip should align with the shape in compact mode
+     */
+    align?: PopoverAlignment;
+    /**
+     * Will auto-align the tooltip in compact mode.
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * When true, displays only the shape with the label in a tooltip
+     */
+    compact?: boolean;
     /**
      * Specify the kind of shape to be used
      */
@@ -20,6 +33,11 @@ export interface ShapeIndicatorProps {
      * Label next to the shape
      */
     label: string;
+    /**
+     * Description for the shape announced to screen readers in compact mode.
+     * Defaults to `label` when not provided.
+     */
+    shapeDescription?: string;
     /**
      * Specify the text size of the Shape Indicator. Defaults to 12.
      */