@carbon/ibm-products 2.89.0 → 2.90.0

package/es/components/Tearsheet/TearsheetShell.js

@@ -24,7 +24,6 @@ import { TearsheetPresence, TearsheetPresenceContext, useExclusiveTearsheetPrese
 import React, { useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Button, ComposedModal, Layer, ModalHeader, Section, unstable_FeatureFlags, useFeatureFlag, usePrefix } from "@carbon/react";
-
 //#region src/components/Tearsheet/TearsheetShell.tsx
 /**
 * Copyright IBM Corp. 2020, 2024
@@ -304,11 +303,38 @@ const TearsheetShellDialog = React.forwardRef(({ actions, decorator, ariaLabel,
 TearsheetShell.displayName = componentName;
 const portalType = typeof Element === "undefined" ? PropTypes.object : PropTypes.instanceOf(Element);
 const deprecatedProps = {
+	/**
+	*  @deprecated Property replaced by `decorator`
+	*/
 	slug: deprecateProp(PropTypes.node, "Property replaced by `decorator`"),
+	/**
+	* **Deprecated**
+	*
+	* The position of the top of tearsheet in the viewport. The 'normal'
+	* position is a short distance down from the top of the
+	* viewport, leaving room at the top for a global header bar to show through
+	* from below. The 'lower' position (the default) provides a little extra room at the top
+	* to allow an action bar navigation or breadcrumbs to also show through.
+	*/
 	verticalPosition: PropTypes.oneOf(["normal", "lower"])
 };
 TearsheetShell.propTypes = {
+	/**
+	* The actions to be shown as buttons in the action area at the bottom of the
+	* tearsheet. Each action is specified as an object with optional fields
+	* 'label' to supply the button label, 'kind' to select the button kind (must
+	* be 'primary', 'secondary' or 'ghost'), 'loading' to display a loading
+	* indicator, and 'onClick' to receive notifications when the button is
+	* clicked. Additional fields in the object will be passed to the Button
+	* component, and these can include 'disabled', 'ref', 'className', and any
+	* other Button props. Any other fields in the object will be passed through
+	* to the button element as HTML attributes.
+	*
+	* See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+	*/
+	/**@ts-ignore*/
 	actions: PropTypes.arrayOf(PropTypes.shape({
+		/**@ts-ignore*/
 		...Button.propTypes,
 		kind: PropTypes.oneOf([
 			"ghost",
@@ -319,30 +345,120 @@ TearsheetShell.propTypes = {
 		]),
 		label: PropTypes.string,
 		loading: PropTypes.bool,
+		/**@ts-ignore*/
 		onClick: Button.propTypes.onClick
 	})),
+	/**
+	* The main content of the tearsheet.
+	*/
 	children: PropTypes.node,
+	/**
+	* An optional class or classes to be added to the outermost element.
+	*/
 	className: PropTypes.string,
+	/**
+	* The accessibility title for the close icon (if shown).
+	*
+	* **Note:** This prop is only required if a close icon is shown, i.e. if
+	* there are a no navigation actions and/or hasCloseIcon is true.
+	*/
+	/**@ts-ignore*/
 	closeIconDescription: PropTypes.string,
+	/**
+	* Optional prop that allows you to pass any component.
+	*/
 	decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+	/**
+	* A description of the flow, displayed in the header area of the tearsheet.
+	*/
 	description: PropTypes.node,
+	/**
+	* Enable a close icon ('x') in the header area of the tearsheet. By default,
+	* (when this prop is omitted, or undefined or null) a tearsheet does not
+	* display a close icon if there are navigation actions ("transactional
+	* tearsheet") and displays one if there are no navigation actions ("passive
+	* tearsheet"), and that behavior can be overridden if required by setting
+	* this prop to either true or false.
+	*/
+	/**@ts-ignore*/
 	hasCloseIcon: PropTypes.bool,
+	/**
+	* The content for the header actions area, displayed alongside the title in
+	* the header area of the tearsheet. This is typically a drop-down, or a set
+	* of small buttons, or similar. NB the headerActions is only applicable for
+	* wide tearsheets.
+	*/
 	headerActions: PropTypes.element,
+	/**
+	* The content for the influencer section of the tearsheet, displayed
+	* alongside the main content. This is typically a menu, or filter, or
+	* progress indicator, or similar. NB the influencer is only applicable for
+	* wide tearsheets.
+	*/
 	influencer: PropTypes.element,
+	/**
+	* The position of the influencer section, 'left' or 'right'.
+	*/
 	influencerPosition: PropTypes.oneOf(["left", "right"]),
+	/**
+	* The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+	* is 320px.
+	*/
 	influencerWidth: PropTypes.oneOf(["narrow", "wide"]),
+	/**
+	* A label for the tearsheet, displayed in the header area of the tearsheet
+	* to maintain context for the tearsheet (e.g. as the title changes from page
+	* to page of a multi-page task).
+	*/
 	label: PropTypes.node,
+	/**
+	* Provide a ref to return focus to once the tearsheet is closed.
+	*/
+	/**@ts-ignore */
 	launcherButtonRef: PropTypes.any,
+	/**
+	* Navigation content, such as a set of tabs, to be displayed at the bottom
+	* of the header area of the tearsheet. NB the navigation is only applicable
+	* for wide tearsheets.
+	*/
 	navigation: PropTypes.element,
+	/**
+	* An optional handler that is called when the user closes the tearsheet (by
+	* clicking the close button, if enabled, or clicking outside, if enabled).
+	* Returning `false` here prevents the modal from closing.
+	*/
 	onClose: PropTypes.func,
+	/**
+	* Specifies whether the tearsheet is currently open.
+	*/
 	open: PropTypes.bool,
+	/**
+	* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+	*/
+	/**@ts-ignore*/
 	portalTarget: portalType,
+	/**
+	* Specify a CSS selector that matches the DOM element that should be
+	* focused when the Modal opens.
+	*/
 	selectorPrimaryFocus: PropTypes.string,
+	/**
+	* Specify the CSS selectors that match the floating menus.
+	*
+	* See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+	*/
+	/**@ts-ignore*/
 	selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
+	/**
+	* Specifies the width of the tearsheet, 'narrow' or 'wide'.
+	*/
+	/**@ts-ignore*/
 	size: PropTypes.oneOf(["narrow", "wide"]).isRequired,
+	/**
+	* The main title of the tearsheet, displayed in the header area.
+	*/
 	title: PropTypes.node,
 	...deprecatedProps
 };
-
 //#endregion
-export { TearsheetShell, portalType, tearsheetShellWideProps };
+export { TearsheetShell, portalType, tearsheetShellWideProps };

package/es/components/Tearsheet/next/StackContext.js

@@ -7,7 +7,6 @@
 
 import { useResizeObserver } from "../../../global/js/hooks/useResizeObserver.js";
 import React, { createContext, useCallback, useContext, useRef, useState } from "react";
-
 //#region src/components/Tearsheet/next/StackContext.tsx
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -73,6 +72,5 @@ const useStackContext = () => {
 	};
 	return context;
 };
-
 //#endregion
-export { StackProvider, useStackContext };
+export { StackProvider, useStackContext };

package/es/components/Tearsheet/next/Tearsheet.js

@@ -23,7 +23,6 @@ import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { ComposedModal, ModalBody, unstable_FeatureFlags, usePrefix } from "@carbon/react";
 import { createPortal } from "react-dom";
 import { breakpoints } from "@carbon/layout";
-
 //#region src/components/Tearsheet/next/Tearsheet.tsx
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -161,6 +160,5 @@ Tearsheet.NavigationBar = TearsheetNavigationBar;
 Tearsheet.ScrollButton = TearsheetScrollButton;
 Tearsheet.HeaderActions = TearsheetHeaderActions;
 Tearsheet.HeaderActionItem = TearsheetHeaderActionItem;
-
 //#endregion
-export { Tearsheet };
+export { Tearsheet };

package/es/components/Tearsheet/next/TearsheetBody.js

@@ -12,7 +12,6 @@ import { TearsheetContext, blockClass } from "./context.js";
 import { useCollapsible } from "../../../global/js/hooks/useCollapsible.js";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { Layer } from "@carbon/react";
-
 //#region src/components/Tearsheet/next/TearsheetBody.tsx
 /**
 * Copyright IBM Corp. 2025
@@ -84,6 +83,5 @@ const Influencer = forwardRef(({ children, className, influencerPanelOpen = fals
 		className: (0, import_classnames.default)(`${blockClass}__side-panel`, className)
 	}, children);
 });
-
 //#endregion
-export { Influencer, MainContent, SummaryContent, TearsheetBody as default };
+export { Influencer, MainContent, SummaryContent, TearsheetBody as default };

package/es/components/Tearsheet/next/TearsheetFooter.js

@@ -10,7 +10,6 @@ import { require_classnames } from "../../../node_modules/classnames/index.js";
 import { ActionSet } from "../../ActionSet/ActionSet.js";
 import { TearsheetContext, blockClass } from "./context.js";
 import React, { forwardRef, useContext } from "react";
-
 //#region src/components/Tearsheet/next/TearsheetFooter.tsx
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -36,6 +35,5 @@ const TearsheetFooter = forwardRef(({ children, className, actions, buttonSize }
 	}));
 });
 TearsheetFooter.displayName = "TearsheetFooter";
-
 //#endregion
-export { TearsheetFooter as default };
+export { TearsheetFooter as default };

package/es/components/Tearsheet/next/TearsheetHeader.js

@@ -11,7 +11,6 @@ import { TearsheetContext, blockClass } from "./context.js";
 import React, { useContext, useEffect, useRef } from "react";
 import { IconButton, ModalHeader } from "@carbon/react";
 import { ChevronUp } from "@carbon/react/icons";
-
 //#region src/components/Tearsheet/next/TearsheetHeader.tsx
 /**
 * Copyright IBM Corp. 2025
@@ -71,6 +70,5 @@ const TearsheetScrollButton = React.forwardRef(function PageHeaderExpander({ cla
 		className: (0, import_classnames.default)(className, `${blockClass}__scroller-button`)
 	}, /* @__PURE__ */ React.createElement(ChevronUp, { className: (0, import_classnames.default)(`${blockClass}__scroller-button-icon`, { [`${blockClass}__scroller-button-icon-collapsed`]: fullyCollapsed }) })));
 });
-
 //#endregion
-export { TearsheetNavigationBar, TearsheetScrollButton, TearsheetHeader as default };
+export { TearsheetNavigationBar, TearsheetScrollButton, TearsheetHeader as default };

package/es/components/Tearsheet/next/TearsheetHeaderActions.js

@@ -12,7 +12,6 @@ import { blockClass } from "./context.js";
 import React, { useRef, useState } from "react";
 import { MenuButton, MenuItem } from "@carbon/react";
 import { createOverflowHandler } from "@carbon/utilities";
-
 //#region src/components/Tearsheet/next/TearsheetHeaderActions.tsx
 /**
 * Copyright IBM Corp. 2025
@@ -72,6 +71,5 @@ const TearsheetHeaderActions = ({ className, children, menuButtonProps }) => {
 const TearsheetHeaderActionItem = ({ children, className }) => {
 	return /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__header-action-item  ${className}` }, children);
 };
-
 //#endregion
-export { TearsheetHeaderActionItem, TearsheetHeaderActions };
+export { TearsheetHeaderActionItem, TearsheetHeaderActions };

package/es/components/Tearsheet/next/TearsheetHeaderContent.js

@@ -12,7 +12,6 @@ import { TearsheetContext, blockClass } from "./context.js";
 import React, { cloneElement, isValidElement, useContext } from "react";
 import { AILabel, IconButton, usePrefix } from "@carbon/react";
 import { Close } from "@carbon/react/icons";
-
 //#region src/components/Tearsheet/next/TearsheetHeaderContent.tsx
 /**
 * Copyright IBM Corp. 2025
@@ -51,6 +50,5 @@ const TearsheetHeaderContent = React.forwardRef((props, ref) => {
 		ref
 	}, !isSm ? /* @__PURE__ */ React.createElement(React.Fragment, null, headerActionsElement, decoratorElement, closeButtonElement, headerContent) : /* @__PURE__ */ React.createElement(React.Fragment, null, decoratorElement, closeButtonElement, headerContent, headerActionsElement));
 });
-
 //#endregion
-export { TearsheetHeaderContent as default };
+export { TearsheetHeaderContent as default };

package/es/components/Tearsheet/next/context.js

@@ -7,7 +7,6 @@
 
 import { pkg } from "../../../settings.js";
 import { createContext } from "react";
-
 //#region src/components/Tearsheet/next/context.ts
 /**
 * Copyright IBM Corp. 2025
@@ -25,6 +24,5 @@ const TearsheetContext = createContext({
 	hideCloseButton: false
 });
 const blockClass = `${pkg.prefix}--tearsheet__next`;
-
 //#endregion
-export { TearsheetContext, blockClass };
+export { TearsheetContext, blockClass };

package/es/components/Tearsheet/usePresence.js

@@ -7,7 +7,6 @@
 
 import { pkg } from "../../settings.js";
 import { useCallback, useLayoutEffect, useState } from "react";
-
 //#region src/components/Tearsheet/usePresence.ts
 /**
 * Copyright IBM Corp. 2025
@@ -48,10 +47,15 @@ const usePresence = (ref, isOpen) => {
 		handleAnimationEnd
 	]);
 	return {
+		/**
+		* Indicates whether the ref object is supposed to be mounted
+		*/
 		isPresent: isOpen || exitState !== "finished",
+		/**
+		* Indicates whether the ref object is currently exiting
+		*/
 		isExiting
 	};
 };
-
 //#endregion
-export { usePresence };
+export { usePresence };

package/es/components/Tearsheet/usePresenceContext.js

@@ -7,7 +7,6 @@
 
 import { usePresence } from "./usePresence.js";
 import { useCallback, useMemo, useRef } from "react";
-
 //#region src/components/Tearsheet/usePresenceContext.ts
 /**
 * Copyright IBM Corp. 2025
@@ -41,6 +40,5 @@ const usePresenceContext = (open, initialPresenceId) => {
 		isExiting
 	])];
 };
-
 //#endregion
-export { usePresenceContext };
+export { usePresenceContext };

package/es/components/Toolbar/Toolbar.js

@@ -12,7 +12,6 @@ import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import { getFocusableElements } from "../../global/js/utils/getFocusableElements.js";
 import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { bool, node, string } from "prop-types";
-
 //#region src/components/Toolbar/Toolbar.tsx
 /**
 * Copyright IBM Corp. 2021, 2025
@@ -72,10 +71,12 @@ const Toolbar = forwardRef(({ children, className, vertical, ...rest }, r) => {
 const componentName = "Toolbar";
 Toolbar.displayName = componentName;
 Toolbar.propTypes = {
+	/** Provide the content of the `Toolbar` */
 	children: node.isRequired,
+	/** Provide an optional class to be applied to the containing node */
 	className: string,
+	/** Determines whether the `Toolbar` is rendered vertically */
 	vertical: bool
 };
-
 //#endregion
-export { Toolbar, ToolbarContext, blockClass };
+export { Toolbar, ToolbarContext, blockClass };

package/es/components/Toolbar/ToolbarButton.js

@@ -11,7 +11,6 @@ import { ToolbarContext, blockClass as blockClass$1 } from "./Toolbar.js";
 import React, { forwardRef, useContext } from "react";
 import { bool, func, node, string } from "prop-types";
 import { IconButton } from "@carbon/react";
-
 //#region src/components/Toolbar/ToolbarButton.tsx
 /**
 * Copyright IBM Corp. 2021, 2024
@@ -35,15 +34,24 @@ const ToolbarButton = forwardRef(({ caret = false, children, className, renderIc
 	}, /* @__PURE__ */ React.createElement(React.Fragment, null, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : null, children, caret && /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__caret` })));
 });
 ToolbarButton.displayName = "ToolbarButton";
-const deprecatedProps = { iconDescription: string };
+const deprecatedProps = { 
+/**
+* **Deprecated**
+* Specifies the label for the icon button
+*  */
+iconDescription: string };
 ToolbarButton.propTypes = {
+	/** Determines whether the caret is rendered */
 	caret: bool,
+	/** Provide the content of the `ToolbarButton` */
 	children: node,
+	/** Provide an optional class to be applied to the containing node */
 	className: string,
+	/** Specifies the label for the icon button */
 	label: string.isRequired,
+	/** Specifies the icon to be used by the ToolbarButton component */
 	renderIcon: func.isRequired,
 	...deprecatedProps
 };
-
 //#endregion
-export { ToolbarButton };
+export { ToolbarButton };

package/es/components/Toolbar/ToolbarGroup.js

@@ -10,7 +10,6 @@ import { require_classnames } from "../../node_modules/classnames/index.js";
 import { blockClass } from "./Toolbar.js";
 import React, { forwardRef } from "react";
 import { node, string } from "prop-types";
-
 //#region src/components/Toolbar/ToolbarGroup.tsx
 /**
 * Copyright IBM Corp. 2021, 2024
@@ -29,9 +28,10 @@ const ToolbarGroup = forwardRef(({ className, children, ...rest }, ref) => {
 });
 ToolbarGroup.displayName = "ToolbarGroup";
 ToolbarGroup.propTypes = {
+	/** Provide the content of the `ToolbarGroup` */
 	children: node.isRequired,
+	/** Provide an optional class to be applied to the containing node */
 	className: string
 };
-
 //#endregion
-export { ToolbarGroup };
+export { ToolbarGroup };

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -10,7 +10,6 @@ import { require_classnames } from "../../node_modules/classnames/index.js";
 import { pkg } from "../../settings.js";
 import React from "react";
 import PropTypes from "prop-types";
-
 //#region src/components/TooltipTrigger/TooltipTrigger.tsx
 /**
 * Copyright IBM Corp. 2023, 2023
@@ -35,9 +34,14 @@ const TooltipTrigger = React.forwardRef(({ children, className, ...rest }, ref)
 });
 TooltipTrigger.displayName = componentName;
 TooltipTrigger.propTypes = {
+	/**
+	* Child content of tooltip trigger
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string
 };
-
 //#endregion
-export { TooltipTrigger };
+export { TooltipTrigger };

package/es/components/TruncatedList/TruncatedList.js

@@ -13,7 +13,6 @@ import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import React, { Children, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Button, usePrefix } from "@carbon/react";
-
 //#region src/components/TruncatedList/TruncatedList.tsx
 /**
 * Copyright IBM Corp. 2024, 2025
@@ -90,16 +89,46 @@ const TruncatedList = React.forwardRef(({ children, className, as: List = defaul
 });
 TruncatedList.displayName = componentName;
 TruncatedList.propTypes = {
+	/**
+	* The type of list element to render.
+	* This could be a `ul`, `ol`, or a custom React component.
+	*/
 	as: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+	/**
+	* Optional class name for expand/collapse button.
+	*/
 	buttonClassName: PropTypes.string,
+	/**
+	* The contents of the TruncatedList.
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* Number of items to render and display when the list is truncated and collapsed.
+	* Scrolling is not enabled when collapsed. The smallest number is 1.
+	*/
 	collapsedItemsLimit: PropTypes.number,
+	/**
+	* Maximum number of items to show when the list is expanded. All
+	* items are rendered when the list is expanded. Scrolling is enabled
+	* if there are more items to display than this number.
+	*/
 	expandedItemsLimit: PropTypes.number,
+	/**
+	* Optional callback reports the collapsed state of the list.
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Text label for when the list is expanded.
+	*/
 	viewLessLabel: PropTypes.string,
+	/**
+	* Callback function for building the label when the list is collapsed.
+	*/
 	viewMoreLabel: PropTypes.func
 };
-
 //#endregion
-export { TruncatedList };
+export { TruncatedList };

package/es/components/TruncatedText/TruncatedText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedText.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedText/TruncatedText.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAW,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAK1D,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD,eAAO,MAAM,aAAa,2FAyFzB,CAAC"}
+{"version":3,"file":"TruncatedText.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedText/TruncatedText.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAW,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAK1D,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAKD,eAAO,MAAM,aAAa,2FAgGzB,CAAC"}

package/es/components/TruncatedText/TruncatedText.js

@@ -12,7 +12,6 @@ import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
 import useTruncatedText from "./useTruncatedText.js";
 import React, { forwardRef, useState } from "react";
 import { Tooltip } from "@carbon/react";
-
 //#region src/components/TruncatedText/TruncatedText.tsx
 /**
 * Copyright IBM Corp. 2025
@@ -41,17 +40,20 @@ const TruncatedText = forwardRef((props, ref) => {
 		if (key === "Enter" || key === " ") handleExpand();
 	};
 	const valueBody = /* @__PURE__ */ React.createElement("span", {
-		...type === "tooltip" ? { role: "button" } : {},
 		ref: contentRef,
 		className: textContentClasses,
 		id,
 		style: textContentStyles
 	}, value);
-	const tooltipVariant = /* @__PURE__ */ React.createElement(Tooltip, {
+	const tooltipVariant = truncated ? /* @__PURE__ */ React.createElement(Tooltip, {
 		align,
 		autoAlign,
 		label: value
-	}, valueBody);
+	}, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${blockClass}__tooltip-trigger`,
+		"aria-label": value
+	}, valueBody)) : valueBody;
 	const expandVariant = /* @__PURE__ */ React.createElement(React.Fragment, null, valueBody, /* @__PURE__ */ React.createElement("span", {
 		"aria-controls": id,
 		"aria-expanded": expanded,
@@ -70,6 +72,5 @@ const TruncatedText = forwardRef((props, ref) => {
 	}, truncated ? truncatedBody : valueBody);
 });
 TruncatedText.displayName = componentName;
-
 //#endregion
-export { TruncatedText };
+export { TruncatedText };

package/es/components/TruncatedText/useTruncatedText.js

@@ -7,7 +7,6 @@
 
 import { checkHeightOverflow } from "../../global/js/utils/checkForOverflow.js";
 import { useEffect, useRef, useState } from "react";
-
 //#region src/components/TruncatedText/useTruncatedText.ts
 /**
 * Copyright IBM Corp. 2025
@@ -40,6 +39,5 @@ function useTruncatedText({ lines, value, expanded }) {
 		truncated
 	};
 }
-
 //#endregion
-export { useTruncatedText as default };
+export { useTruncatedText as default };

package/es/components/UserAvatar/UserAvatar.js

@@ -15,7 +15,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Tooltip, usePrefix } from "@carbon/react";
 import { User } from "@carbon/react/icons";
-
 //#region src/components/UserAvatar/UserAvatar.tsx
 /**
 * Copyright IBM Corp. 2024, 2025
@@ -71,6 +70,10 @@ const UserAvatar = React.forwardRef((props, ref) => {
 });
 UserAvatar.displayName = componentName;
 UserAvatar.propTypes = {
+	/**
+	* Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
+	* For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
+	*/
 	backgroundColor: PropTypes.oneOf([
 		"order-1-cyan",
 		"order-2-gray",
@@ -85,21 +88,45 @@ UserAvatar.propTypes = {
 		"order-11-purple",
 		"order-12-teal"
 	]),
+	/**
+	* Provide an optional class to be applied to the containing node.
+	*/
 	className: PropTypes.string,
+	/**
+	* When passing the image prop, supply a full path to the image to be displayed.
+	*/
+	/**@ts-ignore */
 	image: PropTypes.string,
+	/**
+	* When passing the image prop use the imageDescription prop to describe the image for screen reader.
+	*/
+	/**@ts-ignore */
 	imageDescription: PropTypes.string,
+	/**
+	* When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+	*/
 	name: PropTypes.string,
+	/**
+	* Provide a custom icon to use if you need to use an icon other than the default one
+	*/
+	/**@ts-ignore */
 	renderIcon: PropTypes.oneOfType([
 		PropTypes.func,
 		PropTypes.object,
 		PropTypes.string
 	]),
+	/**
+	* Set the size of the avatar circle
+	*/
 	size: PropTypes.oneOf([
 		"xl",
 		"lg",
 		"md",
 		"sm"
 	]),
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	tooltipAlignment: PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -110,8 +137,10 @@ UserAvatar.propTypes = {
 		"left",
 		"right"
 	]),
+	/**
+	* Pass in the display name to have it shown on hover
+	*/
 	tooltipText: PropTypes.string
 };
-
 //#endregion
-export { UserAvatar };
+export { UserAvatar };