@carbon/react 1.111.1 → 1.112.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -12,6 +12,7 @@ import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -39,7 +40,6 @@ import isEqual from "react-fast-compare";
 */
 const { InputBlur, InputKeyDownEnter, FunctionToggleMenu, ToggleButtonClick, ItemMouseMove, InputKeyDownArrowUp, InputKeyDownArrowDown, MenuMouseLeave, ItemClick, FunctionSelectItem } = 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();
@@ -56,7 +56,7 @@ const findHighlightedIndex = ({ items, itemToString = defaultItemToString }, inp
 	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 (!isItemDisabled(items[i]) && item.indexOf(searchValue) !== -1) return i;
 	}
 	return -1;
 };
@@ -99,7 +99,7 @@ const ComboBox = forwardRef((props, ref) => {
 	useEffect(() => {
 		if (typeahead) {
 			if (inputValue.length >= prevInputLengthRef.current) if (inputValue) {
-				const filteredItems = items.filter((item) => !isDisabledItem(item) && autocompleteCustomFilter({
+				const filteredItems = items.filter((item) => !isItemDisabled(item) && autocompleteCustomFilter({
 					item: itemToString(item),
 					inputValue
 				}));
@@ -221,7 +221,7 @@ const ComboBox = 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 && !isItemDisabled(highlightedItem)) return {
 						...changes,
 						selectedItem: highlightedItem,
 						inputValue: itemToString(highlightedItem)
@@ -230,7 +230,7 @@ const ComboBox = forwardRef((props, ref) => {
 					const autoIndex = indexToHighlight(inputValue);
 					if (autoIndex !== -1) {
 						const matchingItem = items[autoIndex];
-						if (matchingItem && !isDisabledItem(matchingItem)) return {
+						if (matchingItem && !isItemDisabled(matchingItem)) return {
 							...changes,
 							selectedItem: matchingItem,
 							inputValue: itemToString(matchingItem)
@@ -352,7 +352,7 @@ const ComboBox = forwardRef((props, ref) => {
 		initialSelectedItem,
 		inputId: id,
 		stateReducer,
-		isItemDisabled: isDisabledItem,
+		isItemDisabled,
 		...downshiftProps,
 		onStateChange: ({ type, selectedItem: newSelectedItem }) => {
 			if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
@@ -539,7 +539,7 @@ const ComboBox = 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) => !isItemDisabled(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
 											if (matchingItem) {
 												downshiftSetInputValue(itemToString(matchingItem));
 												selectItem(matchingItem);

package/es/components/Dropdown/Dropdown.js

@@ -8,6 +8,7 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -99,9 +100,6 @@ const Dropdown = React.forwardRef(({ autoAlign = false, className: containerClas
 	const onSelectedItemChange = useCallback(({ selectedItem }) => {
 		if (onChange) onChange({ selectedItem: selectedItem ?? null });
 	}, [onChange]);
-	const isItemDisabled = useCallback((item) => {
-		return item !== null && typeof item === "object" && "disabled" in item && item.disabled === true;
-	}, []);
 	const onHighlightedIndexChange = useCallback((changes) => {
 		const { highlightedIndex } = changes;
 		if (highlightedIndex !== void 0 && highlightedIndex > -1) {
@@ -128,7 +126,6 @@ const Dropdown = React.forwardRef(({ autoAlign = false, className: containerClas
 		initialSelectedItem,
 		onSelectedItemChange,
 		stateReducer,
-		isItemDisabled,
 		onHighlightedIndexChange,
 		downshiftProps
 	]);

package/es/components/FeatureFlags/index.js

@@ -22,27 +22,45 @@ import { jsx } from "react/jsx-runtime";
 * or disable feature flags in a given React tree
 */
 const FeatureFlagContext = createContext(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$1 = ({ children, flags = {}, enableV12TileDefaultIcons = false, enableV12TileRadioIcons = false, enableV12Overflowmenu = false, enableTreeviewControllable = false, enableExperimentalFocusWrapWithoutSentinels = false, enableFocusWrapWithoutSentinels = false, enableDialogElement = false, enableV12DynamicFloatingStyles = false, enableEnhancedFileUploader = false, enablePresence = false }) => {
+const FeatureFlags$1 = ({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
 	const parentScope = useContext(FeatureFlagContext);
 	const scope = useMemo(() => {
-		const scope = 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 = createScope(explicitFlags);
 		scope.mergeWithScope(parentScope);
 		return scope;
 	}, [

package/es/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/es/components/IconIndicator/index.js

@@ -6,10 +6,11 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import classNames from "classnames";
 import React from "react";
 import PropTypes from "prop-types";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, CheckmarkOutline, CircleDash, ErrorFilled, InProgress, Incomplete, PendingFilled, UndefinedFilled, UnknownFilled, WarningAltFilled, WarningAltInvertedFilled, WarningSquareFilled } from "@carbon/icons-react";
 //#region src/components/IconIndicator/index.tsx
 /**
@@ -18,54 +19,82 @@ import { CheckmarkFilled, CheckmarkOutline, CircleDash, ErrorFilled, InProgress,
 * 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: ErrorFilled,
-	["caution-major"]: WarningAltInvertedFilled,
-	["caution-minor"]: WarningAltFilled,
+	"caution-major": WarningAltInvertedFilled,
+	"caution-minor": WarningAltFilled,
 	undefined: UndefinedFilled,
 	succeeded: CheckmarkFilled,
 	normal: CheckmarkOutline,
-	["in-progress"]: InProgress,
+	"in-progress": InProgress,
 	incomplete: Incomplete,
-	["not-started"]: CircleDash,
+	"not-started": CircleDash,
 	pending: PendingFilled,
 	unknown: UnknownFilled,
 	informative: WarningSquareFilled
 };
-const IconIndicator = React.forwardRef(({ className: customClassName, kind, label, size = 16 }, ref) => {
+const IconIndicatorKinds = Object.keys(iconTypes);
+const IconIndicator = React.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, iconDescription, kind, label, size = 16 }, ref) => {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size == 20 });
+	const classNames$1 = classNames(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size === 20 });
 	const IconForKind = iconTypes[kind];
 	if (!IconForKind) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	const iconElement = /* @__PURE__ */ jsx(IconForKind, {
+		size,
+		className: `${prefix}--icon-indicator--${kind}`
+	});
+	return /* @__PURE__ */ jsx("div", {
 		className: classNames$1,
 		ref,
-		children: [/* @__PURE__ */ jsx(IconForKind, {
-			size,
-			className: `${prefix}--icon-indicator--${kind}`
-		}), label]
+		children: compact ? /* @__PURE__ */ jsxs(DefinitionTooltip, {
+			align,
+			autoAlign,
+			openOnHover: true,
+			definition: label,
+			triggerClassName: `${prefix}--icon-indicator__button`,
+			children: [iconElement, /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--visually-hidden`,
+				children: iconDescription ?? label
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [iconElement, label] })
 	});
 });
 IconIndicator.propTypes = {
+	/**
+	* Specify how the tooltip should align with the icon in compact mode
+	*/
+	align: PropTypes.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: PropTypes.bool,
 	/**
 	* Specify an optional className to add.
 	*/
 	className: PropTypes.string,
 	/**
+	* When true, displays only the icon with the label in a tooltip
+	*/
+	compact: PropTypes.bool,
+	/**
+	* Description for the icon announced to screen readers in compact mode.
+	* Defaults to `label` when not provided.
+	*/
+	iconDescription: PropTypes.string,
+	/**
 	* Specify the kind of the Icon Indicator
 	*/
 	kind: PropTypes.oneOf(IconIndicatorKinds).isRequired,

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -12,6 +12,7 @@ import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -72,7 +73,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		filteredItems
 	});
 	const selectAllStatus = useMemo(() => {
-		const selectable = nonSelectAllItems.filter((item) => !item.disabled);
+		const selectable = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const nonSelectedCount = selectable.filter((item) => !controlledSelectedItems.some((sel) => isEqual(sel, item))).length;
 		const totalCount = selectable.length;
 		return {
@@ -81,7 +82,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		};
 	}, [controlledSelectedItems, nonSelectAllItems]);
 	const handleSelectAllClick = useCallback(() => {
-		const selectable = nonSelectAllItems.filter((i) => !i.disabled);
+		const selectable = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const { checked, indeterminate } = selectAllStatus;
 		if (checked || indeterminate) toggleAll(controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel))));
 		else {
@@ -131,7 +132,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	}, [open]);
 	const sortedItems = useMemo(() => {
 		const selectAllItem = items.find(isSelectAllItem);
-		const selectableRealItems = nonSelectAllItems.filter((item) => !item.disabled);
+		const selectableRealItems = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const sortedReal = sortItems(nonSelectAllItems, {
 			selectedItems: {
 				top: controlledSelectedItems,
@@ -255,9 +256,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		inputId,
 		inputValue,
 		stateReducer,
-		isItemDisabled(item) {
-			return item?.disabled;
-		}
+		isItemDisabled
 	});
 	function stateReducer(state, actionAndChanges) {
 		const { type, props, changes } = actionAndChanges;
@@ -266,7 +265,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		switch (type) {
 			case InputKeyDownEnter:
 				if (sortedItems.length === 0) return changes;
-				if (changes.selectedItem && changes.selectedItem.disabled !== true) if (isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
+				if (changes.selectedItem && !isItemDisabled(changes.selectedItem)) if (isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return {

package/es/components/MultiSelect/MultiSelect.js

@@ -13,6 +13,7 @@ import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -114,9 +115,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		},
 		selectedItem: controlledSelectedItems,
 		items: filteredItems,
-		isItemDisabled(item) {
-			return item?.disabled;
-		},
+		isItemDisabled,
 		...downshiftProps
 	});
 	const toggleButtonProps = getToggleButtonProps({
@@ -298,7 +297,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		return {
 			hasIndividualSelections: selectedItems.some((selected) => !isSelectAllItem(selected)),
 			nonSelectAllSelectedCount: selectedItems.filter((selected) => !isSelectAllItem(selected)).length,
-			totalSelectableCount: filteredItems.filter((item) => !isSelectAllItem(item) && !item.disabled).length
+			totalSelectableCount: filteredItems.filter((item) => !isSelectAllItem(item) && !isItemDisabled(item)).length
 		};
 	}, [selectedItems, filteredItems]);
 	return /* @__PURE__ */ jsxs("div", {

package/es/components/OverflowMenu/OverflowMenu.js

@@ -18,7 +18,7 @@ import { mergeRefs } from "../../tools/mergeRefs.js";
 import { DIRECTION_BOTTOM, FloatingMenu } from "../../internal/FloatingMenu.js";
 import { useOutsideClick } from "../../internal/useOutsideClick.js";
 import classNames from "classnames";
-import React, { Children, cloneElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { Children, cloneElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OverflowMenuVertical } from "@carbon/icons-react";
@@ -81,7 +81,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
 		};
 	}
 };
-const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, ariaLabel: deprecatedAriaLabel, children, className, direction = DIRECTION_BOTTOM, flipped = false, focusTrap = false, iconClass, iconDescription = "Options", id, light, menuOffset = getMenuOffset, menuOffsetFlip = getMenuOffset, menuOptionsClass, onClick = noopFn, onClose = noopFn, onOpen = noopFn, open: openProp, renderIcon: IconElement = OverflowMenuVertical, selectorPrimaryFocus = "[data-floating-menu-primary-focus]", size = "md", innerRef, ...other }, ref) => {
+const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, ariaLabel: deprecatedAriaLabel, children, className, direction = DIRECTION_BOTTOM, flipped = false, focusTrap = false, iconClass, iconDescription = "Options", id, light, menuOffset = getMenuOffset, menuOffsetFlip = getMenuOffset, menuOptionsClass, onClick = noopFn, onClose = noopFn, onOpen = noopFn, open: openProp, renderIcon: IconElement = OverflowMenuVertical, selectorPrimaryFocus = "[data-floating-menu-primary-focus]", size, innerRef, ...other }, ref) => {
 	const prefix = useContext(PrefixContext);
 	const [open, setOpen] = useState(openProp ?? false);
 	const [click, setClick] = useState(false);
@@ -96,6 +96,8 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	/** The element ref of the tooltip's trigger button. */
 	const triggerRef = useRef(null);
 	const wrapperRef = useRef(null);
+	const [, forceUpdate] = useReducer((x) => x + 1, 0);
+	const resizeObserverRef = useRef(null);
 	useEffect(() => {
 		if (prevOpenProp.current !== openProp) {
 			setOpen(!!openProp);
@@ -105,6 +107,26 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	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
+	*/
+	useEffect(() => {
+		resizeObserverRef.current = new ResizeObserver(() => {
+			forceUpdate();
+		});
+		return () => {
+			resizeObserverRef.current?.disconnect();
+			resizeObserverRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		if (!triggerRef.current || !resizeObserverRef.current) return;
+		if (open) resizeObserverRef.current.observe(triggerRef.current);
+		else resizeObserverRef.current.disconnect();
+	}, [open]);
 	useEffect(() => {
 		if (open && !prevOpenState.current) onOpen();
 		else if (!open && prevOpenState.current) onClose();
@@ -205,22 +227,25 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	};
 	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 = classNames(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 = classNames(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 = classNames(`${prefix}--overflow-menu__icon`, iconClass);
+	const overflowMenuWrapperClasses = classNames(`${prefix}--overflow-menu__wrapper`);
 	const childrenWithProps = Children.toArray(children).map((child, index) => {
 		if (isValidElement(child)) {
 			const childElement = child;
@@ -257,7 +282,7 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	});
 	const combinedRef = innerRef ? mergeRefs(triggerRef, innerRef, ref) : mergeRefs(triggerRef, ref);
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", {
-		className: `${prefix}--overflow-menu__wrapper`,
+		className: overflowMenuWrapperClasses,
 		"aria-owns": open ? menuBodyId : void 0,
 		ref: wrapperRef,
 		children: [/* @__PURE__ */ jsx(IconButton, {

package/es/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/es/components/OverflowMenu/next/index.js

@@ -22,7 +22,7 @@ import { OverflowMenuVertical } from "@carbon/icons-react";
 import { autoUpdate, flip, useFloating } from "@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.
@@ -67,7 +67,7 @@ const OverflowMenu = React.forwardRef(({ autoAlign = false, children, className,
 	}
 	const containerClasses = classNames(className, `${prefix}--overflow-menu__container`, { [`${prefix}--autoalign`]: enableFloatingStyles });
 	const menuClasses = classNames(`${prefix}--overflow-menu__${menuAlignment}`);
-	const triggerClasses = classNames(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+	const triggerClasses = classNames(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`, size !== defaultSize && `${prefix}--layout--size-${size}`);
 	const floatingRef = mergeRefs(triggerRef, refs.setReference);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,

package/es/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.
      */

package/es/components/ShapeIndicator/index.js

@@ -6,10 +6,11 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import classNames from "classnames";
 import React from "react";
 import PropTypes from "prop-types";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Caution, CircleFill, CircleStroke, Critical, CriticalSeverity, DiamondFill, LowSeverity } from "@carbon/icons-react";
 //#region src/components/ShapeIndicator/index.tsx
 /**
@@ -61,26 +62,62 @@ const shapeTypes = {
 	incomplete: incompleteIcon,
 	draft: CircleStroke
 };
-const ShapeIndicator = React.forwardRef(({ className: customClassName, kind, label, textSize = 12 }, ref) => {
+const ShapeIndicator = React.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, kind, label, shapeDescription, textSize = 12 }, ref) => {
 	const prefix = usePrefix();
 	const classNames$1 = classNames(`${prefix}--shape-indicator`, customClassName, { [`${prefix}--shape-indicator--14`]: textSize == 14 });
 	const ShapeForKind = shapeTypes[kind];
 	if (!ShapeForKind) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	const shapeElement = /* @__PURE__ */ jsx(ShapeForKind, {
+		size: 16,
+		className: `${prefix}--shape-indicator--${kind}`
+	});
+	return /* @__PURE__ */ jsx("div", {
 		className: classNames$1,
 		ref,
-		children: [/* @__PURE__ */ jsx(ShapeForKind, {
-			size: 16,
-			className: `${prefix}--shape-indicator--${kind}`
-		}), label]
+		children: compact ? /* @__PURE__ */ jsxs(DefinitionTooltip, {
+			align,
+			autoAlign,
+			openOnHover: true,
+			definition: label,
+			triggerClassName: `${prefix}--shape-indicator__button`,
+			children: [shapeElement, /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--visually-hidden`,
+				children: shapeDescription ?? label
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [shapeElement, label] })
 	});
 });
 ShapeIndicator.propTypes = {
+	/**
+	* Specify how the tooltip should align with the shape in compact mode
+	*/
+	align: PropTypes.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: PropTypes.bool,
 	/**
 	* Specify an optional className to add.
 	*/
 	className: PropTypes.string,
 	/**
+	* When true, displays only the shape with the label in a tooltip
+	*/
+	compact: PropTypes.bool,
+	/**
 	* Specify the kind of the Shape Indicator
 	*/
 	kind: PropTypes.oneOf(ShapeIndicatorKinds).isRequired,
@@ -89,6 +126,11 @@ ShapeIndicator.propTypes = {
 	*/
 	label: PropTypes.string.isRequired,
 	/**
+	* Description for the shape announced to screen readers in compact mode.
+	* Defaults to `label` when not provided.
+	*/
+	shapeDescription: PropTypes.string,
+	/**
 	* Specify the text size of the Shape Indicator. Defaults to 12.
 	*/
 	textSize: PropTypes.oneOf([12, 14])