@carbon/react 1.111.0 → 1.112.0-rc.0

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/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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.111.0",
+  "version": "1.112.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^1.4.0",
-    "@carbon/icons-react": "^11.83.0",
-    "@carbon/layout": "^11.54.0",
-    "@carbon/styles": "^1.110.0",
-    "@carbon/utilities": "^0.21.0",
+    "@carbon/icons-react": "^11.84.0-rc.0",
+    "@carbon/layout": "^11.55.0-rc.0",
+    "@carbon/styles": "^1.111.0-rc.0",
+    "@carbon/utilities": "^0.22.0-rc.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.76.0",
+    "@carbon/themes": "^11.77.0-rc.0",
     "@figma/code-connect": "^1.4.7",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
@@ -110,7 +110,8 @@
     "stream-browserify": "^3.0.0",
     "tinyclip": "^0.1.12",
     "tsdown": "^0.22.0",
-    "typescript-config-carbon": "^0.10.0",
+    "typescript": "^6.0.3",
+    "typescript-config-carbon": "^0.11.0-rc.0",
     "use-sync-external-store": "^1.5.0",
     "vite": "^8.0.0"
   },
@@ -125,5 +126,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "30ca2b932469a5c89da10cb8d1fa82586ed14018"
+  "gitHead": "1738a92e35dc0b9ba19877b9a4319bcc3336c5b1"
 }

package/telemetry.yml

@@ -43,6 +43,7 @@ collect:
         - closeOnActivation
         - cols
         - colSpan
+        - compact
         - compareItems
         - condensed
         - contained
@@ -531,6 +532,7 @@ collect:
         # SelectItem
         - hidden
         # ShapeIndicator
+        - shapeDescription
         - textSize
         # SideNav
         - addMouseListeners