@carbon/react 1.111.1 → 1.112.0

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/ListBox/next/ListBoxSelection.d.ts

@@ -56,6 +56,11 @@ export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
      * clear selection element fires a mouseup event
      */
     onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onMouseDown` handler that is called when the underlying
+     * clear selection element fires a mousedown event
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
 }
 declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, readOnly, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListBoxSelection {
@@ -84,8 +89,13 @@ declare namespace ListBoxSelection {
          */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
-         * Specify an optional `onClick` handler that is called when the underlying
-         * clear selection element is clicked
+         * Specify an optional `onMouseDown` handler that is called when the underlying
+         * clear selection element fires a mousedown event
+         */
+        onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onMouseUp` handler that is called when the underlying
+         * clear selection element fires a mouseup event
          */
         onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
         /**

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -110,8 +110,13 @@ ListBoxSelection.propTypes = {
 	*/
 	onClick: prop_types.default.func,
 	/**
-	* Specify an optional `onClick` handler that is called when the underlying
-	* clear selection element is clicked
+	* Specify an optional `onMouseDown` handler that is called when the underlying
+	* clear selection element fires a mousedown event
+	*/
+	onMouseDown: prop_types.default.func,
+	/**
+	* Specify an optional `onMouseUp` handler that is called when the underlying
+	* clear selection element fires a mouseup event
 	*/
 	onMouseUp: prop_types.default.func,
 	/**

package/lib/components/Modal/Modal.js

@@ -306,8 +306,8 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		focusAfterCloseRef: launcherButtonRef,
 		modal: true,
 		ref: innerModal,
-		role: isAlertDialog ? "alertdialog" : "",
-		"aria-describedby": isAlertDialog ? modalBodyId : "",
+		role: isAlertDialog ? "alertdialog" : void 0,
+		"aria-describedby": isAlertDialog ? modalBodyId : void 0,
 		className: containerClasses,
 		"aria-label": ariaLabel,
 		"data-exiting": presenceContext?.isExiting || void 0,

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");
@@ -49,7 +50,7 @@ react_fast_compare = require_runtime.__toESM(react_fast_compare);
 * 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 { InputBlur, InputKeyDownEnter, ItemClick, MenuMouseLeave, InputKeyDownArrowUp, InputKeyDownArrowDown, ItemMouseMove, InputClick, ToggleButtonClick, FunctionToggleMenu, InputChange, InputKeyDownEscape, FunctionSetHighlightedIndex } = downshift.useCombobox.stateChangeTypes;
+const { InputBlur, InputKeyDownEnter, ItemClick, MenuMouseLeave, InputKeyDownArrowUp, InputKeyDownArrowDown, ItemMouseMove, InputClick, ToggleButtonClick, FunctionToggleMenu, InputChange, InputKeyDownEscape, FunctionSetHighlightedIndex, FunctionSetInputValue } = downshift.useCombobox.stateChangeTypes;
 const { SelectedItemKeyDownBackspace, SelectedItemKeyDownDelete, DropdownKeyDownBackspace, FunctionRemoveSelectedItem } = downshift.useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSelect({ autoAlign = false, className: containerClassName, clearSelectionDescription = "Total items selected: ", clearSelectionText = "To clear selection, press Delete or Backspace", compareItems = require_sorting.defaultCompareItems, decorator, direction = "bottom", disabled = false, downshiftProps, filterItems = require_filter.defaultFilterItems, helperText, hideLabel, id, initialSelectedItems = [], invalid = false, invalidText, items, itemToElement: ItemToElement, itemToString = require_defaultItemToString.defaultItemToString, light, locale = "en", onInputValueChange, open = false, onChange, onMenuChange, placeholder, readOnly, titleText, type, selectionFeedback = "top-after-reopen", selectedItems: selected, size, sortItems = require_sorting.defaultSortItems, translateWithId, useTitleInItem, warn = false, warnText, slug, inputProps }, ref) {
 	const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
@@ -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 {
@@ -371,8 +370,15 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 	});
 	function clearInputValue(event) {
 		const value = textInput.current?.value;
-		if (value?.length === 1 || event && "key" in event && require_match.match(event, require_keys.Escape)) setInputValue("");
-		else setInputValue(value ?? "");
+		const isEscape = event && "key" in event && require_match.match(event, require_keys.Escape);
+		const isClick = value && !(event && "key" in event);
+		if (value?.length === 1 || isEscape || isClick) {
+			setInputValue("");
+			onInputValueChange?.({
+				inputValue: "",
+				type: FunctionSetInputValue
+			});
+		} else setInputValue(value ?? "");
 		if (textInput.current) textInput.current.focus();
 	}
 	const candidate = slug ?? decorator;
@@ -515,6 +521,9 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 								disabled,
 								translateWithId,
 								readOnly,
+								onMouseDown: (event) => {
+									event.preventDefault();
+								},
 								onMouseUp: (event) => {
 									event.stopPropagation();
 								}

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

package/lib/components/ShapeIndicator/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");
@@ -65,26 +66,62 @@ const shapeTypes = {
 	incomplete: incompleteIcon,
 	draft: _carbon_icons_react.CircleStroke
 };
-const ShapeIndicator = react.default.forwardRef(({ className: customClassName, kind, label, textSize = 12 }, ref) => {
+const ShapeIndicator = react.default.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, kind, label, shapeDescription, textSize = 12 }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const classNames = (0, classnames.default)(`${prefix}--shape-indicator`, customClassName, { [`${prefix}--shape-indicator--14`]: textSize == 14 });
 	const ShapeForKind = shapeTypes[kind];
 	if (!ShapeForKind) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const shapeElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShapeForKind, {
+		size: 16,
+		className: `${prefix}--shape-indicator--${kind}`
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: classNames,
 		ref,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShapeForKind, {
-			size: 16,
-			className: `${prefix}--shape-indicator--${kind}`
-		}), label]
+		children: compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DefinitionTooltip.DefinitionTooltip, {
+			align,
+			autoAlign,
+			openOnHover: true,
+			definition: label,
+			triggerClassName: `${prefix}--shape-indicator__button`,
+			children: [shapeElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefix}--visually-hidden`,
+				children: shapeDescription ?? label
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [shapeElement, label] })
 	});
 });
 ShapeIndicator.propTypes = {
+	/**
+	* Specify how the tooltip should align with the shape 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 shape with the label in a tooltip
+	*/
+	compact: prop_types.default.bool,
+	/**
 	* Specify the kind of the Shape Indicator
 	*/
 	kind: prop_types.default.oneOf(ShapeIndicatorKinds).isRequired,
@@ -93,6 +130,11 @@ ShapeIndicator.propTypes = {
 	*/
 	label: prop_types.default.string.isRequired,
 	/**
+	* Description for the shape announced to screen readers in compact mode.
+	* Defaults to `label` when not provided.
+	*/
+	shapeDescription: prop_types.default.string,
+	/**
 	* Specify the text size of the Shape Indicator. Defaults to 12.
 	*/
 	textSize: prop_types.default.oneOf([12, 14])

package/lib/components/Tabs/Tabs.js

@@ -934,7 +934,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/lib/components/Tooltip/DefinitionTooltip.js

@@ -31,7 +31,10 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 	const prefix = require_usePrefix.usePrefix();
 	const tooltipId = require_useId.useFallbackId(id);
 	function onKeyDown(event) {
-		if (isOpen && require_match.match(event, require_keys.Escape)) {
+		if (require_match.match(event, require_keys.Enter) || require_match.match(event, require_keys.Space)) {
+			event.preventDefault();
+			setOpen(!isOpen);
+		} else if (isOpen && require_match.match(event, require_keys.Escape)) {
 			event.stopPropagation();
 			setOpen(false);
 		}

package/lib/feature-flags.js

@@ -16,6 +16,7 @@
 	"enable-css-custom-properties": true,
 	"enable-css-grid": true,
 	"enable-v11-release": true,
+	"enable-v12-release": false,
 	"enable-experimental-tile-contrast": false,
 	"enable-tile-contrast": false,
 	"enable-v12-tile-radio-icons": false,

package/lib/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/lib/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/lib/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
+exports.isItemDisabled = isItemDisabled;