@carbon/react 1.110.0-rc.0 → 1.111.0-rc.0

package/es/components/UIShell/SideNavItems.js

@@ -32,8 +32,19 @@ const SideNavItems = ({ className: customClassName, children, isSideNavExpanded
 };
 SideNavItems.displayName = "SideNavItems";
 SideNavItems.propTypes = {
+	/**
+	* Provide a single icon as the child to `SideNavIcon` to render in the
+	* container
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* Property to indicate if the side nav container is open (or not). Use to
+	* keep local state and styling in step with the SideNav expansion state.
+	*/
 	isSideNavExpanded: PropTypes.bool
 };
 //#endregion

package/es/components/UIShell/SideNavLink.js

@@ -49,12 +49,34 @@ const SideNavLink = forwardRef((props, ref) => {
 SideNavLink.displayName = "SideNavLink";
 SideNavLink.propTypes = {
 	...LinkPropTypes,
+	/**
+	* Specify the text content for the link
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the link is the current page
+	*/
 	isActive: PropTypes.bool,
+	/**
+	* Property to indicate if the side nav container is open (or not). Use to
+	* keep local state and styling in step with the SideNav expansion state.
+	*/
 	isSideNavExpanded: PropTypes.bool,
+	/**
+	* Specify if this is a large variation of the SideNavLink
+	*/
 	large: PropTypes.bool,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+	*/
 	tabIndex: PropTypes.number
 };
 //#endregion

package/es/components/UIShell/SideNavLinkText.js

@@ -26,7 +26,13 @@ function SideNavLinkText({ className: customClassName, children, ...rest }) {
 	});
 }
 SideNavLinkText.propTypes = {
+	/**
+	* Provide the content for the link text
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class to be applied to the containing node
+	*/
 	className: PropTypes.string
 };
 //#endregion

package/es/components/UIShell/SideNavMenu.js

@@ -83,14 +83,45 @@ const SideNavMenu = forwardRef(({ className: customClassName, children, defaultE
 });
 SideNavMenu.displayName = "SideNavMenu";
 SideNavMenu.propTypes = {
+	/**
+	* Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the menu should default to expanded. By default, it will
+	* be closed.
+	*/
 	defaultExpanded: PropTypes.bool,
+	/**
+	* Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
+	* considered active if one of its menu items are a link for the current
+	* page.
+	*/
 	isActive: PropTypes.bool,
+	/**
+	* Property to indicate if the side nav container is open (or not). Use to
+	* keep local state and styling in step with the SideNav expansion state.
+	*/
 	isSideNavExpanded: PropTypes.bool,
+	/**
+	* Specify if this is a large variation of the SideNavMenu
+	*/
 	large: PropTypes.bool,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+	*/
 	tabIndex: PropTypes.number,
+	/**
+	* Provide the text for the overall menu name
+	*/
 	title: PropTypes.string.isRequired
 };
 /**

package/es/components/UIShell/SideNavMenuItem.js

@@ -39,10 +39,27 @@ const SideNavMenuItem = forwardRef((props, ref) => {
 });
 SideNavMenuItem.displayName = "SideNavMenuItem";
 SideNavMenuItem.propTypes = {
+	/**
+	* Optional component to render instead of default Link
+	*/
 	as: PropTypes.elementType,
+	/**
+	* Specify the children to be rendered inside of the `SideNavMenuItem`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional class to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* Optionally provide an href for the underlying li`
+	*/
 	href: PropTypes.string,
+	/**
+	* Optionally specify whether the link is "active". An active link is one that
+	* has an href that is the same as the current page. Can also pass in
+	* `aria-current="page"`, as well.
+	*/
 	isActive: PropTypes.bool
 };
 //#endregion

package/es/components/UIShell/SideNavSwitcher.js

@@ -59,9 +59,25 @@ const SideNavSwitcher = forwardRef((props, ref) => {
 });
 SideNavSwitcher.displayName = "SideNavSwitcher";
 SideNavSwitcher.propTypes = {
+	/**
+	* Provide an optional class to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide the label for the switcher. This will be the first visible option
+	* when someone views this control
+	*/
 	labelText: PropTypes.string.isRequired,
+	/**
+	* Provide a callback function that is called whenever the switcher value is
+	* updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide an array of options to be rendered in the switcher as an
+	* `<option>`. The text value will be what is displayed to the user and is set
+	* as the `value` prop for each `<option>`.
+	*/
 	options: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 //#endregion

package/es/components/UIShell/SkipToContent.js

@@ -28,9 +28,20 @@ function SkipToContent({ children = "Skip to main content", className: customCla
 	});
 }
 SkipToContent.propTypes = {
+	/**
+	* A ReactNode to display in the SkipToContent `a` tag.
+	* `'Skip to main content'` by default.
+	*/
 	children: PropTypes.string,
 	className: PropTypes.string,
+	/**
+	* Provide the `href` to the id of the element on your package that is the
+	* main content. `#main-content` by default.
+	*/
 	href: PropTypes.string,
+	/**
+	* Optionally override the default tabindex of 0
+	*/
 	tabIndex: PropTypes.string
 };
 //#endregion

package/es/components/UIShell/Switcher.js

@@ -69,9 +69,21 @@ const Switcher = forwardRef((props, forwardRef) => {
 });
 Switcher.displayName = "Switcher";
 Switcher.propTypes = {
+	/**
+	* Required props for accessibility label on the underlying menu
+	*/
 	...AriaLabelPropType,
+	/**
+	* expects to receive <SwitcherItem />
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Optionally provide a custom class to apply to the underlying `<ul>` node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the panel is expanded
+	*/
 	expanded: PropTypes.bool
 };
 //#endregion

package/es/components/UIShell/SwitcherDivider.js

@@ -18,6 +18,10 @@ const SwitcherDivider = ({ className: customClassName, ...other }) => {
 		className: classNames$1
 	}) });
 };
-SwitcherDivider.propTypes = { className: PropTypes.string };
+SwitcherDivider.propTypes = { 
+/**
+* Optionally provide a custom class to apply to the underlying `<hr>` node
+*/
+className: PropTypes.string };
 //#endregion
 export { SwitcherDivider as default };

package/es/components/UIShell/SwitcherItem.js

@@ -68,15 +68,45 @@ const SwitcherItem = forwardRef((props, forwardRef) => {
 SwitcherItem.displayName = "SwitcherItem";
 SwitcherItem.propTypes = {
 	...AriaLabelPropType,
+	/**
+	* Specify the text content for the link
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Optionally provide a custom class to apply to the underlying `<li>` node
+	*/
 	className: PropTypes.string,
+	/**
+	* event handlers
+	*/
 	handleSwitcherItemFocus: PropTypes.func,
+	/**
+	* Optionally provide an href for the underlying li`
+	*/
 	href: PropTypes.string,
+	/**
+	* Specify the index of the SwitcherItem
+	*/
 	index: PropTypes.number,
+	/**
+	* event handlers
+	*/
 	onClick: PropTypes.func,
+	/**
+	* event handlers
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* Specify the tab index of the Link
+	*/
 	tabIndex: PropTypes.number,
+	/**
+	* Specify where to open the link.
+	*/
 	target: PropTypes.string,
+	/**
+	* The rel property for the link.
+	*/
 	rel: PropTypes.string
 };
 //#endregion

package/es/components/UnorderedList/UnorderedList.js

@@ -28,9 +28,21 @@ function UnorderedList({ className, nested = false, isExpressive = false, ...oth
 	});
 }
 UnorderedList.propTypes = {
+	/**
+	* Specify a collection of ListItem's to be rendered in the UnorderedList
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the underlying `<ul>` node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether this ordered list expressive or not
+	*/
 	isExpressive: PropTypes.bool,
+	/**
+	* Specify whether the list is nested, or not
+	*/
 	nested: PropTypes.bool
 };
 //#endregion

package/es/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import './feature-flags';
+import './internal/warnAboutDeprecatedReactVersion';
 export * from './components/Accordion';
 export * from './components/AccordionItem';
 export * from './components/AspectRatio';

package/es/internal/OptimizedResize.js

@@ -31,10 +31,14 @@ const OptimizedResize = (() => {
 	const addCallback = (callback) => {
 		if (callbacks.indexOf(callback) < 0) callbacks.push(callback);
 	};
-	return { add: (callback) => {
+	return { 
+	/** Adds a callback function to be executed on window `resize`. */
+add: (callback) => {
 		if (!callbacks.length) win.addEventListener("resize", handleResize);
 		addCallback(callback);
-		return { remove: () => {
+		return { 
+		/** Removes the callback. */
+remove: () => {
 			const index = callbacks.indexOf(callback);
 			if (index >= 0) callbacks.splice(index, 1);
 		} };

package/es/internal/usePresence.js

@@ -51,7 +51,13 @@ const usePresence = (ref, isOpen) => {
 		prefix
 	]);
 	return {
+		/**
+		* Indicates whether the ref object is supposed to be mounted
+		*/
 		isPresent: isOpen || exitState !== "finished",
+		/**
+		* Indicates whether the ref object is currently exiting
+		*/
 		isExiting
 	};
 };

package/es/internal/warnAboutDeprecatedReactVersion.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 function warnAboutDeprecatedReactVersion(version?: string): void;

package/lib/components/AILabel/index.js

@@ -38,7 +38,13 @@ const AILabelContent = ({ className, children }) => {
 };
 AILabelContent.displayName = "AILabelContent";
 AILabelContent.propTypes = {
+	/**
+	* Specify the content you want rendered inside the AILabel ToggleTip
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to the AILabel callout
+	*/
 	className: prop_types.default.string
 };
 const AILabelActions = ({ className, children }) => {
@@ -49,7 +55,13 @@ const AILabelActions = ({ className, children }) => {
 };
 AILabelActions.displayName = "AILabelActions";
 AILabelActions.propTypes = {
+	/**
+	* Specify the content you want rendered inside the AILabel callout toolbar
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to the AILabel toolbar
+	*/
 	className: prop_types.default.string
 };
 const AILabel = react.default.forwardRef(function AILabel({ aiText = "AI", aiTextLabel, textLabel, align, autoAlign = true, children, className, kind = "default", onRevertClick, revertActive, revertLabel = "Revert to AI input", slugLabel = "Show information", ["aria-label"]: ariaLabel = "Show information", size = "xs", ...rest }, ref) {
@@ -107,14 +119,42 @@ const AILabel = react.default.forwardRef(function AILabel({ aiText = "AI", aiTex
 AILabel.displayName = "AILabel";
 AILabel.propTypes = {
 	...require_index$1.default.propTypes,
+	/**
+	* Specify the content you want rendered inside the `AILabel` ToggleTip
+	*/
 	AILabelContent: prop_types.default.node,
+	/**
+	* Specify the correct translation of the AI text
+	*/
 	aiText: prop_types.default.string,
+	/**
+	* @deprecated
+	* Specify additional text to be rendered next to the AI label in the inline variant
+	*/
 	aiTextLabel: require_deprecate.deprecate(prop_types.default.string, "`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead"),
+	/**
+	* Specify the text that will be provided to the aria-label of the `AILabel` button
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Specify the type of `AILabel`, from the following list of types:
+	*/
 	kind: prop_types.default.oneOf(["default", "inline"]),
+	/**
+	* Callback function that fires when the revert button is clicked
+	*/
 	onRevertClick: prop_types.default.func,
+	/**
+	* Specify whether the revert button should be visible
+	*/
 	revertActive: prop_types.default.bool,
+	/**
+	* Specify the text that should be shown when the revert button is hovered
+	*/
 	revertLabel: prop_types.default.string,
+	/**
+	* Specify the size of the button, from the following list of sizes:
+	*/
 	size: prop_types.default.oneOf([
 		"mini",
 		"2xs",
@@ -124,7 +164,14 @@ AILabel.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* @deprecated
+	* Specify the text that will be provided to the aria-label of the `AILabel` button
+	*/
 	slugLabel: require_deprecate.deprecate(prop_types.default.string, "`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead"),
+	/**
+	* Specify additional text to be rendered next to the AI label in the inline variant
+	*/
 	textLabel: prop_types.default.string
 };
 //#endregion

package/lib/components/AISkeleton/AISkeletonIcon.js

@@ -29,7 +29,13 @@ const AISkeletonIcon = ({ className, ...rest }) => {
 	});
 };
 AISkeletonIcon.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* The CSS styles.
+	*/
 	style: prop_types.default.object
 };
 //#endregion

package/lib/components/AISkeleton/AISkeletonPlaceholder.js

@@ -28,6 +28,11 @@ const AISkeletonPlaceholder = ({ className, ...other }) => {
 		...other
 	});
 };
-AISkeletonPlaceholder.propTypes = { className: prop_types.default.string };
+AISkeletonPlaceholder.propTypes = { 
+/**
+* Add a custom class to the component
+* to set the height and width
+*/
+className: prop_types.default.string };
 //#endregion
 exports.default = AISkeletonPlaceholder;

package/lib/components/AISkeleton/AISkeletonText.js

@@ -29,10 +29,25 @@ const AISkeletonText = ({ className, ...rest }) => {
 	});
 };
 AISkeletonText.propTypes = {
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* generates skeleton text at a larger size
+	*/
 	heading: prop_types.default.bool,
+	/**
+	* the number of lines shown if paragraph is true
+	*/
 	lineCount: prop_types.default.number,
+	/**
+	* will generate multiple lines of text
+	*/
 	paragraph: prop_types.default.bool,
+	/**
+	* width (in px or %) of single line of text or max-width of paragraph lines
+	*/
 	width: prop_types.default.string
 };
 //#endregion

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -50,10 +50,25 @@ function AccordionSkeleton({ align = "end", className, count = 4, isFlush, open
 	});
 }
 AccordionSkeleton.propTypes = {
+	/**
+	* Specify the alignment of the accordion heading title and chevron.
+	*/
 	align: prop_types.default.oneOf(["start", "end"]),
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Set number of items to render
+	*/
 	count: prop_types.default.number,
+	/**
+	* Specify whether an individual AccordionItem should be flush, default is false
+	*/
 	isFlush: prop_types.default.bool,
+	/**
+	* `false` to not display the first item opened
+	*/
 	open: prop_types.default.bool
 };
 function AccordionSkeletonItem() {

package/lib/components/Accordion/Accordion.js

@@ -40,12 +40,34 @@ function Accordion({ align = "end", children, className: customClassName, disabl
 	});
 }
 Accordion.propTypes = {
+	/**
+	* Specify the alignment of the accordion heading title and chevron.
+	*/
 	align: prop_types.default.oneOf(["start", "end"]),
+	/**
+	* Pass in the children that will be rendered within the Accordion
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether an individual AccordionItem should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify whether Accordion text should be flush, default is false, does not work with align="start"
+	*/
 	isFlush: prop_types.default.bool,
+	/**
+	* Specify if the Accordion should be an ordered list,
+	* default is `false`
+	*/
 	ordered: prop_types.default.bool,
+	/**
+	* Specify the size of the Accordion. Currently supports the following:
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",

package/lib/components/Accordion/AccordionItem.js

@@ -100,15 +100,48 @@ function AccordionItem({ children, className: customClassName = "", open = false
 	});
 }
 AccordionItem.propTypes = {
+	/**
+	* Provide the contents of your AccordionItem
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether an individual AccordionItem should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify a custom label for the accordion button.
+	* This is important for accessibility when the accordion has no visible title.
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* The handler of the massaged `click` event.
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* The handler of the massaged `click` event on the heading.
+	*/
 	onHeadingClick: prop_types.default.func,
+	/**
+	* `true` to open the expand.
+	*/
 	open: prop_types.default.bool,
+	/**
+	* The callback function to render the expand button.
+	* Can be a React component class.
+	*/
 	renderExpando: require_deprecate.deprecate(prop_types.default.func, "The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead."),
+	/**
+	* The callback function to render the expand button.
+	* Can be a React component class.
+	*/
 	renderToggle: prop_types.default.func,
+	/**
+	* The accordion title.
+	*/
 	title: prop_types.default.node
 };
 //#endregion

package/lib/components/AspectRatio/AspectRatio.js

@@ -36,9 +36,28 @@ const AspectRatio = ({ as: BaseComponent = "div", className: containerClassName,
 	});
 };
 AspectRatio.propTypes = {
+	/**
+	* Provide a custom component or string to be rendered as the outermost node
+	* of the component. This is useful if you want to deviate from the default
+	* `div` tag, where you could specify `section` or `article` instead.
+	*
+	* ```jsx
+	* <AspectRatio as="article">My content</AspectRatio>
+	* ```
+	*/
 	as: prop_types.default.elementType,
+	/**
+	* Specify the content that will be placed in the aspect ratio
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify a class name for the outermost node of the component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the ratio to be used by the aspect ratio container. This will
+	* determine what aspect ratio your content will be displayed in.
+	*/
 	ratio: prop_types.default.oneOf([
 		"16x9",
 		"9x16",

package/lib/components/BadgeIndicator/index.js

@@ -35,8 +35,17 @@ const BadgeIndicator = frFn((props, ref) => {
 	});
 });
 BadgeIndicator.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Count of badge indicator
+	*/
 	count: prop_types.default.number,
+	/**
+	* Provide an `id` to uniquely identify the BadgeIndidcator
+	*/
 	id: prop_types.default.string
 };
 //#endregion

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -45,9 +45,21 @@ function BreadcrumbSkeleton({ className, items = 3, noTrailingSlash, size, ...re
 	});
 }
 BreadcrumbSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the number of items
+	*/
 	items: prop_types.default.number,
+	/**
+	* Optional prop to omit the trailing slash for the breadcrumbs
+	*/
 	noTrailingSlash: prop_types.default.bool,
+	/**
+	* Specify the size of the Breadcrumb. Currently supports the following: `sm` & `md` (default: 'md')
+	*/
 	size: prop_types.default.oneOf(["sm", "md"])
 };
 //#endregion