@carbon/react 1.110.0 → 1.111.0-rc.0

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

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_index = require("../SkeletonText/index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -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

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_AccordionProvider = require("./AccordionProvider.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -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

@@ -13,10 +13,10 @@ const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -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

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -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

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -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

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -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

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -42,10 +42,26 @@ const Breadcrumb = (0, react.forwardRef)((props, ref) => {
 });
 Breadcrumb.displayName = "Breadcrumb";
 Breadcrumb.propTypes = {
+	/**
+	* Specify the label for the breadcrumb container
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Pass in the BreadcrumbItem's for your Breadcrumb
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* 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

package/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -9,10 +9,10 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_index = require("../Link/index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -84,9 +84,21 @@ BreadcrumbItem.propTypes = {
 		"date",
 		"time"
 	])]),
+	/**
+	* Pass in content that will be inside of the BreadcrumbItem
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Optional string representing the link location for the BreadcrumbItem
+	*/
 	href: prop_types.default.string,
+	/**
+	* Provide if this breadcrumb item represents the current page
+	*/
 	isCurrentPage: prop_types.default.bool
 };
 //#endregion

package/lib/components/Button/Button.Skeleton.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -46,8 +46,19 @@ const ButtonSkeleton = ({ className, small = false, href, size = "lg", ...rest }
 	return href ? anchor : button;
 };
 ButtonSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Optionally specify an href for your Button to become an `<a>` element
+	*/
 	href: prop_types.default.string,
+	/**
+	* Specify the size of the button, from a list of available sizes.
+	* For `default` buttons, this prop can remain unspecified or use `default`.
+	* In the next major release of Carbon, `default`, `field`, and `small` will be removed
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",
@@ -56,6 +67,12 @@ ButtonSkeleton.propTypes = {
 		"xl",
 		"2xl"
 	]),
+	/**
+	* @deprecated This property will be removed in the next major Carbon version,
+	* use size={sm} instead.
+	*
+	* Specify whether the Button should be a small variant
+	*/
 	small: prop_types.default.bool
 };
 //#endregion

package/lib/components/Button/Button.js

@@ -94,24 +94,64 @@ const Button = react.default.forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 Button.propTypes = {
+	/**
+	* Specify how the button itself should be rendered.
+	* Make sure to apply all props to the root node and render children appropriately
+	*/
 	as: prop_types.default.oneOfType([
 		prop_types.default.func,
 		prop_types.default.string,
 		prop_types.default.elementType
 	]),
+	/**
+	* **Experimental**: Will attempt to automatically align the tooltip. Requires
+	* React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: prop_types.default.bool,
+	/**
+	* Specify the content of your Button
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your Button
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the message read by screen readers for the danger button variants
+	*/
 	dangerDescription: prop_types.default.string,
+	/**
+	* Specify whether the Button should be disabled, or not
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify if the button is an icon-only button
+	*/
 	hasIconOnly: prop_types.default.bool,
+	/**
+	* Optionally specify an href for your Button to become an `<a>` element
+	*/
 	href: prop_types.default.string,
+	/**
+	* If specifying the `renderIcon` prop, provide a description for that icon that can
+	* be read by screen readers
+	*/
 	iconDescription: (props) => {
 		if (props.renderIcon && !props.children && !props.iconDescription) return /* @__PURE__ */ new Error("renderIcon property specified without also providing an iconDescription property.");
 		return null;
 	},
+	/**
+	* Specify whether the Button is expressive, or not
+	*/
 	isExpressive: prop_types.default.bool,
+	/**
+	* Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.
+	*/
 	isSelected: prop_types.default.bool,
+	/**
+	* Specify the kind of Button you want to create
+	*/
 	kind: (props, propName, componentName) => {
 		const { hasIconOnly } = props;
 		const validKinds = hasIconOnly ? require_index.IconButtonKinds : ButtonKinds;
@@ -119,14 +159,46 @@ Button.propTypes = {
 		if (!validKinds.includes(props[propName])) return /* @__PURE__ */ new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected one of ${validKinds.join(", ")}.`);
 		return null;
 	},
+	/**
+	* Provide an optional function to be called when the button element
+	* loses focus
+	*/
 	onBlur: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when the button element
+	* is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when the button element
+	* receives focus
+	*/
 	onFocus: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when the mouse
+	* enters the button element
+	*/
 	onMouseEnter: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when the mouse
+	* leaves the button element
+	*/
 	onMouseLeave: prop_types.default.func,
+	/**
+	* Optionally specify a `rel` when using an `<a>` element.
+	*/
 	rel: prop_types.default.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Optional prop to specify the role of the Button
+	*/
 	role: prop_types.default.string,
+	/**
+	* Specify the size of the button, from the following list of sizes:
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",
@@ -135,21 +207,45 @@ Button.propTypes = {
 		"xl",
 		"2xl"
 	]),
+	/**
+	* Optional prop to specify the tabIndex of the Button
+	*/
 	tabIndex: prop_types.default.number,
+	/**
+	* Optionally specify a `target` when using an `<a>` element.
+	*/
 	target: prop_types.default.string,
+	/**
+	* Specify the alignment of the tooltip to the icon-only button.
+	* Can be one of: `start`, `center`, or `end`.
+	*/
 	tooltipAlignment: prop_types.default.oneOf([
 		"start",
 		"center",
 		"end"
 	]),
+	/**
+	* Enable drop shadow for tooltips for icon-only buttons.
+	*/
 	tooltipDropShadow: prop_types.default.bool,
+	/**
+	* Enable high-contrast theme for tooltips for icon-only buttons.
+	* Defaults to true.
+	*/
 	tooltipHighContrast: prop_types.default.bool,
+	/**
+	* Specify the direction of the tooltip for icon-only buttons.
+	* Can be either `top`, `right`, `bottom`, or `left`.
+	*/
 	tooltipPosition: prop_types.default.oneOf([
 		"top",
 		"right",
 		"bottom",
 		"left"
 	]),
+	/**
+	* Optional prop to specify the type of the Button
+	*/
 	type: prop_types.default.oneOf([
 		"button",
 		"reset",

package/lib/components/Button/ButtonBase.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Button/ButtonBase.tsx
 /**

package/lib/components/ButtonSet/ButtonSet.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -80,9 +80,23 @@ const ButtonSet = (0, react.forwardRef)((props, ref) => {
 });
 ButtonSet.displayName = "ButtonSet";
 ButtonSet.propTypes = {
+	/**
+	* Specify the content of your ButtonSet
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your ButtonSet
+	*/
 	className: prop_types.default.string,
+	/**
+	* fluid: button set resize to the size of the container up to a maximum dependant on the
+	* number of buttons.
+	*/
 	fluid: prop_types.default.bool,
+	/**
+	* Specify the button arrangement of the set (vertically stacked or
+	* horizontal) - ignored when fluid is true
+	*/
 	stacked: prop_types.default.bool
 };
 //#endregion

package/lib/components/ChatButton/ChatButton.Skeleton.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -29,7 +29,13 @@ const ChatButtonSkeleton = ({ className, size, ...rest }) => {
 	});
 };
 ChatButtonSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",

package/lib/components/ChatButton/ChatButton.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_index = require("../Button/index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -54,11 +54,29 @@ const ChatButton = react.default.forwardRef(function ChatButton({ className, chi
 	});
 });
 ChatButton.propTypes = {
+	/**
+	* Provide the contents of your Select
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the node containing the label and the select box
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the `ChatButton` should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify whether the `ChatButton` should be rendered as a quick action button
+	*/
 	isQuickAction: prop_types.default.bool,
+	/**
+	* Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+	*/
 	isSelected: prop_types.default.bool,
+	/**
+	* Specify the kind of `ChatButton` you want to create
+	*/
 	kind: prop_types.default.oneOf([
 		"primary",
 		"secondary",
@@ -66,7 +84,13 @@ ChatButton.propTypes = {
 		"ghost",
 		"tertiary"
 	]),
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Specify the size of the `ChatButton`, from the following list of sizes:
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",