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

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -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

@@ -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

@@ -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/ButtonSet/ButtonSet.js

@@ -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

@@ -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

@@ -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",

package/lib/components/Checkbox/Checkbox.Skeleton.js

@@ -32,6 +32,10 @@ const CheckboxSkeleton = ({ className, ...rest }) => {
 		})
 	});
 };
-CheckboxSkeleton.propTypes = { className: prop_types.default.string };
+CheckboxSkeleton.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: prop_types.default.string };
 //#endregion
 exports.default = CheckboxSkeleton;

package/lib/components/Checkbox/Checkbox.js

@@ -116,23 +116,80 @@ const Checkbox = react.default.forwardRef(({ className, decorator, helperText, i
 	});
 });
 Checkbox.propTypes = {
+	/**
+	* Specify whether the underlying input should be checked
+	*/
 	checked: prop_types.default.bool,
+	/**
+	* Specify an optional className to be applied to the <label> node
+	*/
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `Checkbox` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Specify whether the underlying input should be checked by default
+	*/
 	defaultChecked: prop_types.default.bool,
+	/**
+	* Specify whether the Checkbox should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide text for the form group for additional help
+	*/
 	helperText: prop_types.default.node,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Provide an `id` to uniquely identify the Checkbox input
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify whether the Checkbox is in an indeterminate state
+	*/
 	indeterminate: prop_types.default.bool,
+	/**
+	* Specify whether the Checkbox is currently invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the Checkbox is in an invalid state
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Provide a label to provide a description of the Checkbox input that you are
+	* exposing to the user
+	*/
 	labelText: prop_types.default.node.isRequired,
+	/**
+	* Provide an optional handler that is called when the internal state of
+	* Checkbox changes. This handler is called with event and state info.
+	* `(event, { checked, id }) => void`
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Specify whether the Checkbox is read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+	*/
 	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Specify a title for the <label> node for the Checkbox
+	*/
 	title: prop_types.default.string,
+	/**
+	* Specify whether the Checkbox is currently in warning state
+	*/
 	warn: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the Checkbox is in warning state
+	*/
 	warnText: prop_types.default.node
 };
 Checkbox.displayName = "Checkbox";

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -109,18 +109,58 @@ const CheckboxGroup = ({ children, className, decorator, helperText, invalid, in
 	});
 };
 CheckboxGroup.propTypes = {
+	/**
+	* Provide the children form elements to be rendered inside of the <fieldset>
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom className to be applied to the containing <fieldset> node
+	*/
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `CheckboxGroup` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Provide text for the form group for additional help
+	*/
 	helperText: prop_types.default.node,
+	/**
+	* Specify whether the form group is currently invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the form group is in an invalid state
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Provide id for the fieldset <legend> which corresponds to the fieldset
+	* `aria-labelledby`
+	*/
 	legendId: prop_types.default.node,
+	/**
+	* Provide the text to be rendered inside of the fieldset <legend>
+	*/
 	legendText: prop_types.default.node.isRequired,
+	/**
+	* Provide the orientation for how the checkbox should be displayed
+	*/
 	orientation: prop_types.default.oneOf(["horizontal", "vertical"]),
+	/**
+	* Whether the CheckboxGroup should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+	*/
 	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Specify whether the form group is currently in warning state
+	*/
 	warn: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the form group is in warning state
+	*/
 	warnText: prop_types.default.node
 };
 //#endregion

package/lib/components/ClassPrefix/index.js

@@ -27,6 +27,9 @@ function ClassPrefix({ children, prefix }) {
 }
 ClassPrefix.propTypes = {
 	children: prop_types.default.node,
+	/**
+	* The value used to prefix the CSS selectors used by Carbon components
+	*/
 	prefix: prop_types.default.string.isRequired
 };
 //#endregion

package/lib/components/CodeSnippet/CodeSnippet.Skeleton.js

@@ -51,7 +51,13 @@ function CodeSnippetSkeleton({ className: containerClassName, type = "single", .
 	});
 }
 CodeSnippetSkeleton.propTypes = {
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* The type of the code snippet, including single or multi
+	*/
 	type: prop_types.default.oneOf(["single", "multi"])
 };
 //#endregion

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -164,6 +164,9 @@ function CodeSnippet({ align = "bottom", autoAlign = false, className, type = "s
 	});
 }
 CodeSnippet.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: require_deprecateValuesWithin.deprecateValuesWithin(prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -199,30 +202,103 @@ CodeSnippet.propTypes = {
 		"right-start",
 		"right-end"
 	], require_mapPopoverAlign.mapPopoverAlign),
+	/**
+	* Specify a label to be read by screen readers on the containing textbox
+	* node
+	*/
 	["aria-label"]: prop_types.default.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify a label to be read by screen readers on the containing textbox
+	* node
+	*/
 	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* **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,
+	/**
+	* Provide the content of your CodeSnippet as a node or string
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the description for the Copy Button
+	*/
 	copyButtonDescription: prop_types.default.string,
+	/**
+	* Optional text to copy. If not specified, the `children` node's `innerText`
+	* will be used as the copy value.
+	*/
 	copyText: prop_types.default.string,
+	/**
+	* Specify whether or not the CodeSnippet should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the string displayed when the snippet is copied
+	*/
 	feedback: prop_types.default.string,
+	/**
+	* Specify the time it takes for the feedback message to timeout
+	*/
 	feedbackTimeout: prop_types.default.number,
+	/**
+	* Specify whether or not a copy button should be used/rendered.
+	*/
 	hideCopyButton: prop_types.default.bool,
+	/**
+	* Specify whether you are using the light variant of the Code Snippet,
+	* typically used for inline snippet to display an alternate color
+	*/
 	light: require_deprecate.deprecate(prop_types.default.bool, "The `light` prop for `CodeSnippet` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Specify the maximum number of rows to be shown when in collapsed view
+	*/
 	maxCollapsedNumberOfRows: prop_types.default.number,
+	/**
+	* Specify the maximum number of rows to be shown when in expanded view
+	*/
 	maxExpandedNumberOfRows: prop_types.default.number,
+	/**
+	* Specify the minimum number of rows to be shown when in collapsed view
+	*/
 	minCollapsedNumberOfRows: prop_types.default.number,
+	/**
+	* Specify the minimum number of rows to be shown when in expanded view
+	*/
 	minExpandedNumberOfRows: prop_types.default.number,
+	/**
+	* An optional handler to listen to the `onClick` even fired by the Copy
+	* Button
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Specify a string that is displayed when the Code Snippet has been
+	* interacted with to show more lines
+	*/
 	showLessText: prop_types.default.string,
+	/**
+	* Specify a string that is displayed when the Code Snippet text is more
+	* than 15 lines
+	*/
 	showMoreText: prop_types.default.string,
+	/**
+	* Provide the type of Code Snippet
+	*/
 	type: prop_types.default.oneOf([
 		"single",
 		"inline",
 		"multi"
 	]),
+	/**
+	* Specify whether or not to wrap the text.
+	*/
 	wrapText: prop_types.default.bool
 };
 //#endregion