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

package/es/components/ComposedModal/ModalFooter.js

@@ -101,27 +101,87 @@ const ModalFooter = React.forwardRef(function ModalFooter({ children, className:
 	});
 });
 ModalFooter.propTypes = {
+	/**
+	* Pass in content that will be rendered in the Modal Footer
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the Modal Footer container
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify an optional function that is called whenever the modal is closed
+	*/
 	closeModal: PropTypes.func,
+	/**
+	* Specify whether the primary button should be replaced with danger button.
+	* Note that this prop is not applied if you render primary/danger button by yourself
+	*/
 	danger: PropTypes.bool,
+	/**
+	* Specify the message read by screen readers for the danger primary button.
+	* Defaults to an empty string; provide localized text to opt in.
+	*/
 	dangerDescription: PropTypes.string,
+	/**
+	* The `ref` callback for the primary button.
+	*/
 	inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
+	/**
+	* Specify the description for the loading text
+	*/
 	loadingDescription: PropTypes.string,
+	/**
+	* Specify the description for the loading text
+	*/
 	loadingIconDescription: PropTypes.string,
+	/**
+	* loading status
+	*/
 	loadingStatus: PropTypes.oneOf([
 		"inactive",
 		"active",
 		"finished",
 		"error"
 	]),
+	/**
+	* Provide an optional handler to be invoked when loading is
+	* successful
+	*/
 	onLoadingSuccess: PropTypes.func,
+	/**
+	* Specify an optional function for when the modal is requesting to be
+	* closed
+	*/
 	onRequestClose: PropTypes.func,
+	/**
+	* Specify an optional function for when the modal is requesting to be
+	* submitted
+	*/
 	onRequestSubmit: PropTypes.func,
+	/**
+	* Specify whether the primary button should be disabled
+	*/
 	primaryButtonDisabled: PropTypes.bool,
+	/**
+	* Specify the text for the primary button
+	*/
 	primaryButtonText: PropTypes.string,
+	/**
+	* Specify a custom className to be applied to the primary button
+	*/
 	primaryClassName: PropTypes.string,
+	/**
+	* Specify the text for the secondary button
+	*/
 	secondaryButtonText: PropTypes.string,
+	/**
+	* Specify an array of config objects for secondary buttons
+	* (`Array<{
+	*   buttonText: string,
+	*   onClick: function,
+	* }>`).
+	*/
 	secondaryButtons: (props, propName, componentName) => {
 		if (props.secondaryButtons) {
 			if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
@@ -135,6 +195,9 @@ ModalFooter.propTypes = {
 		}
 		return null;
 	},
+	/**
+	* Specify a custom className to be applied to the secondary button
+	*/
 	secondaryClassName: PropTypes.string
 };
 //#endregion

package/es/components/ComposedModal/ModalHeader.js

@@ -92,16 +92,51 @@ const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, child
 	});
 });
 ModalHeader.propTypes = {
+	/**
+	* Provide an optional function to be called when the close button is
+	* clicked
+	*/
 	buttonOnClick: PropTypes.func,
+	/**
+	* Specify the content to be placed in the ModalHeader
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the modal header
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify an optional className to be applied to the modal close node
+	*/
 	closeClassName: PropTypes.string,
+	/**
+	* Specify an optional className to be applied to the modal close icon node
+	*/
 	closeIconClassName: PropTypes.string,
+	/**
+	* Provide an optional function to be called when the modal is closed
+	*/
 	closeModal: PropTypes.func,
+	/**
+	* Specify a description for the close icon that can be read by screen
+	* readers
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Specify an optional label to be displayed
+	*/
 	label: PropTypes.string,
+	/**
+	* Specify an optional className to be applied to the modal header label
+	*/
 	labelClassName: PropTypes.string,
+	/**
+	* Specify an optional title to be displayed
+	*/
 	title: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the modal heading
+	*/
 	titleClassName: PropTypes.string
 };
 //#endregion

package/es/components/ContainedList/ContainedList.js

@@ -69,12 +69,33 @@ const ContainedList = ({ action, children, className, isInset, kind = variants[0
 	});
 };
 ContainedList.propTypes = {
+	/**
+	* A slot for a possible interactive element to render.
+	*/
 	action: PropTypes.node,
+	/**
+	* A collection of ContainedListItems to be rendered in the ContainedList
+	*/
 	children: PropTypes.node,
+	/**
+	* Additional CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the dividing lines in between list items should be inset.
+	*/
 	isInset: PropTypes.bool,
+	/**
+	* The kind of ContainedList you want to display
+	*/
 	kind: PropTypes.oneOf(variants),
+	/**
+	* A label describing the contained list.
+	*/
 	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+	/**
+	* Specify the size of the contained list.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -47,11 +47,29 @@ const ContainedListItem = ({ action, children, className, disabled = false, onCl
 	});
 };
 ContainedListItem.propTypes = {
+	/**
+	* A slot for a possible interactive element to render within the item.
+	*/
 	action: PropTypes.node,
+	/**
+	* The content of this item. Must not contain any interactive elements. Use props.action to include those.
+	*/
 	children: PropTypes.node,
+	/**
+	* Additional CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* Whether this item is disabled.
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide an optional function to be called when the item is clicked.
+	*/
 	onClick: PropTypes.func,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 //#endregion

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -109,13 +109,38 @@ const ContentSwitcher = ({ children, className, light, lowContrast, selectedInde
 };
 ContentSwitcher.displayName = "ContentSwitcher";
 ContentSwitcher.propTypes = {
+	/**
+	* Pass in Switch components to be rendered in the ContentSwitcher
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* `true` to use the light variant.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `ContentSwitcher` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	/**
+	* `true` to use the low contrast version.
+	*/
 	lowContrast: PropTypes.bool,
+	/**
+	* Specify an `onChange` handler that is called whenever the ContentSwitcher
+	* changes which item is selected
+	*/
 	onChange: PropTypes.func.isRequired,
+	/**
+	* Specify a selected index for the initially selected content
+	*/
 	selectedIndex: PropTypes.number,
+	/**
+	* Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
+	*/
 	selectionMode: PropTypes.oneOf(["automatic", "manual"]),
+	/**
+	* Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",

package/es/components/Copy/Copy.js

@@ -59,6 +59,9 @@ function Copy({ align = "bottom", autoAlign = false, children, className, feedba
 	});
 }
 Copy.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: deprecateValuesWithin(PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -94,12 +97,38 @@ Copy.propTypes = {
 		"right-start",
 		"right-end"
 	], mapPopoverAlign),
+	/**
+	* **Experimental**: Will attempt to automatically align the tooltip. Requires
+	* React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: PropTypes.bool,
+	/**
+	* Pass in content to be rendered in the underlying `<button>`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the underlying `<button>`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the string that is displayed when the button is clicked and the
+	* content is copied
+	*/
 	feedback: PropTypes.string,
+	/**
+	* Specify the time it takes for the feedback message to timeout
+	*/
 	feedbackTimeout: PropTypes.number,
+	/**
+	* Specify an optional `onAnimationEnd` handler that is called when the underlying
+	* animation ends
+	*/
 	onAnimationEnd: PropTypes.func,
+	/**
+	* Specify an optional `onClick` handler that is called when the underlying
+	* `<button>` is clicked
+	*/
 	onClick: PropTypes.func
 };
 //#endregion

package/es/components/CopyButton/CopyButton.js

@@ -44,6 +44,9 @@ function CopyButton({ align = "bottom", autoAlign = false, feedback = "Copied!",
 	});
 }
 CopyButton.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: deprecateValuesWithin(PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -79,11 +82,34 @@ CopyButton.propTypes = {
 		"right-start",
 		"right-end"
 	], mapPopoverAlign),
+	/**
+	* **Experimental**: Will attempt to automatically align the tooltip. Requires
+	* React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: PropTypes.bool,
+	/**
+	* Specify an optional className to be applied to the underlying `<button>`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the string that is displayed when the button is clicked and the
+	* content is copied
+	*/
 	feedback: PropTypes.string,
+	/**
+	* Specify the time it takes for the feedback message to timeout
+	*/
 	feedbackTimeout: PropTypes.number,
+	/**
+	* Provide a description for the icon representing the copy action that can
+	* be read by screen readers
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Specify an optional `onClick` handler that is called when the underlying
+	* `<button>` is clicked
+	*/
 	onClick: PropTypes.func
 };
 //#endregion

package/es/components/DataTable/DataTable.js

@@ -452,25 +452,68 @@ DataTable.TableToolbarContent = TableToolbarContent;
 DataTable.TableToolbarSearch = TableToolbarSearch;
 DataTable.TableToolbarMenu = TableToolbarMenu;
 DataTable.propTypes = {
+	/**
+	* Pass in the children that will be rendered within the Table
+	*/
 	children: PropTypes.func,
+	/**
+	* Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+	*/
 	experimentalAutoAlign: PropTypes.bool,
+	/**
+	* Optional hook to manually control filtering of the rows from the
+	* TableToolbarSearch component
+	*/
 	filterRows: PropTypes.func,
+	/**
+	* The `headers` prop represents the order in which the headers should
+	* appear in the table. We expect an array of objects to be passed in, where
+	* `key` is the name of the key in a row object, and `header` is the name of
+	* the header.
+	*/
 	headers: PropTypes.arrayOf(PropTypes.shape({
 		key: PropTypes.string.isRequired,
 		header: PropTypes.node.isRequired,
 		isSortable: PropTypes.bool
 	})).isRequired,
+	/**
+	* Specify whether the table should be able to be sorted by its headers
+	*/
 	isSortable: PropTypes.bool,
+	/**
+	* Provide a string for the current locale
+	*/
 	locale: PropTypes.string,
+	/**
+	* Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+	*/
 	overflowMenuOnHover: PropTypes.bool,
+	/**
+	* Specify whether the control should be a radio button or inline checkbox
+	*/
 	radio: PropTypes.bool,
+	/**
+	* @deprecated Use `children` instead. This prop will be removed in
+	* the next major version.
+	*
+	* https://www.patterns.dev/react/render-props-pattern/#children-as-a-function
+	*/
 	render: deprecate(PropTypes.func),
+	/**
+	* The `rows` prop is where you provide us with a list of all the rows that
+	* you want to render in the table. The only hard requirement is that this
+	* is an array of objects, and that each object has a unique `id` field
+	* available on it.
+	*/
 	rows: PropTypes.arrayOf(PropTypes.shape({
 		id: PropTypes.string.isRequired,
 		disabled: PropTypes.bool,
 		isSelected: PropTypes.bool,
 		isExpanded: PropTypes.bool
 	})).isRequired,
+	/**
+	*  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
@@ -478,10 +521,26 @@ DataTable.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* Optional hook to manually control sorting of the rows.
+	*/
 	sortRow: PropTypes.func,
+	/**
+	* Specify whether the header should be sticky.
+	* Still experimental: may not work with every combination of table props
+	*/
 	stickyHeader: PropTypes.bool,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func,
+	/**
+	* If `true`, sets the table width to `auto` instead of `100%`.
+	*/
 	useStaticWidth: PropTypes.bool,
+	/**
+	* `true` to add useZebraStyles striping.
+	*/
 	useZebraStyles: PropTypes.bool
 };
 //#endregion

package/es/components/DataTable/Table.js

@@ -101,11 +101,26 @@ const Table = ({ className, children, useZebraStyles, size = "lg", isSortable =
 	}) : table;
 };
 Table.propTypes = {
+	/**
+	* Pass in the children that will be rendered within the Table
+	*/
 	children: PropTypes.node,
 	className: PropTypes.string,
+	/**
+	* Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+	*/
 	experimentalAutoAlign: PropTypes.bool,
+	/**
+	* `false` If true, will apply sorting styles
+	*/
 	isSortable: PropTypes.bool,
+	/**
+	* Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+	*/
 	overflowMenuOnHover: PropTypes.bool,
+	/**
+	*  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
@@ -113,9 +128,21 @@ Table.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* `false` If true, will keep the header sticky (only data rows will scroll)
+	*/
 	stickyHeader: PropTypes.bool,
+	/**
+	* If `true`, sets the table width to `auto` instead of `100%`.
+	*/
 	useStaticWidth: PropTypes.bool,
+	/**
+	* `true` to add useZebraStyles striping.
+	*/
 	useZebraStyles: PropTypes.bool,
+	/**
+	* Specify the table tabIndex
+	*/
 	tabIndex: PropTypes.number
 };
 //#endregion

package/es/components/DataTable/TableBatchAction.js

@@ -23,10 +23,20 @@ const TableBatchAction = ({ renderIcon = AddFilled, iconDescription = "Add", ...
 	...props
 });
 TableBatchAction.propTypes = {
+	/**
+	* Specify if the button is an icon-only button
+	*/
 	hasIconOnly: PropTypes.bool,
+	/**
+	* 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.");
 	},
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 //#endregion

package/es/components/DataTable/TableBatchActions.js

@@ -83,11 +83,35 @@ const TableBatchActions = ({ className, children, shouldShowBatchActions, totalS
 TableBatchActions.propTypes = {
 	children: PropTypes.node,
 	className: PropTypes.string,
+	/**
+	* Hook required to listen for when the user initiates a cancel request
+	* through this component
+	*/
 	onCancel: PropTypes.func.isRequired,
+	/**
+	* Hook to listen for when the user initiates a select all
+	* request through this component. This _only_ controls the rendering
+	* of the `Select All` button and does not include built in functionality
+	*/
 	onSelectAll: PropTypes.func,
+	/**
+	* Boolean specifier for whether or not the batch action bar should be
+	* displayed
+	*/
 	shouldShowBatchActions: PropTypes.bool,
+	/**
+	* Numeric representation of the total number of items in a table.
+	* This number is used in the select all button text
+	*/
 	totalCount: PropTypes.number,
+	/**
+	* Numeric representation of the total number of items selected in a table.
+	* This number is used to derive the selection message
+	*/
 	totalSelected: PropTypes.number.isRequired,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func
 };
 //#endregion

package/es/components/DataTable/TableBody.js

@@ -22,6 +22,9 @@ const TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("tbo
 	children
 });
 TableBody.propTypes = {
+	/**
+	* `polite` Adjust the notification behavior of screen readers
+	*/
 	"aria-live": PropTypes.oneOf([
 		"polite",
 		"assertive",

package/es/components/DataTable/TableCell.js

@@ -30,10 +30,25 @@ const TableCell = forwardRef((props, ref) => {
 });
 TableCell.displayName = "TableCell";
 TableCell.propTypes = {
+	/**
+	* Pass in children that will be embedded in the table header label
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* The width of the expanded row's internal cell
+	*/
 	colSpan: PropTypes.number,
+	/**
+	* Specify if the table cell is in an AI column
+	*/
 	hasAILabelHeader: PropTypes.bool,
+	/**
+	* The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+	*/
 	headers: PropTypes.string
 };
 //#endregion

package/es/components/DataTable/TableContainer.js

@@ -71,13 +71,31 @@ const TableContainer = ({ aiEnabled, className, children, decorator, title, desc
 	});
 };
 TableContainer.propTypes = {
+	/**
+	* Specify if the entire table has AI generated contents
+	*/
 	aiEnabled: PropTypes.bool,
 	children: PropTypes.node,
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `TableContainer` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Optional description text for the Table
+	*/
 	description: PropTypes.node,
+	/**
+	* Specify whether the table should have a sticky header
+	*/
 	stickyHeader: PropTypes.bool,
+	/**
+	* Provide a title for the Table
+	*/
 	title: PropTypes.node,
+	/**
+	* If true, will use a width of 'fit-content' to match the inner table width
+	*/
 	useStaticWidth: PropTypes.bool
 };
 //#endregion

package/es/components/DataTable/TableDecoratorRow.js

@@ -32,7 +32,13 @@ const TableDecoratorRow = ({ className, decorator }) => {
 };
 TableDecoratorRow.displayName = "TableDecoratorRow";
 TableDecoratorRow.propTypes = {
+	/**
+	* The CSS class names of the cell that wraps the underlying input control
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+	*/
 	decorator: PropTypes.node
 };
 //#endregion

package/es/components/DataTable/TableExpandHeader.js

@@ -44,16 +44,47 @@ const TableExpandHeader = ({ ["aria-controls"]: ariaControls, ["aria-label"]: ar
 	});
 };
 TableExpandHeader.propTypes = {
+	/**
+	* Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+	*/
 	["aria-controls"]: PropTypes.string,
+	/**
+	* Specify the string read by a voice reader when the expand trigger is
+	* focused
+	*/
 	["aria-label"]: PropTypes.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the string read by a voice reader when the expand trigger is
+	* focused
+	*/
 	ariaLabel: PropTypes.string,
 	children: PropTypes.node,
 	className: PropTypes.string,
+	/**
+	* The enableExpando prop is being replaced by TableExpandHeader
+	*/
 	enableExpando: deprecate(PropTypes.bool, "The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release."),
+	/**
+	* Specify whether an expand all button should be displayed
+	*/
 	enableToggle: PropTypes.bool,
+	/**
+	* The description of the chevron right icon, to be put in its SVG `<title>` element.
+	*/
 	expandIconDescription: PropTypes.string,
+	/**
+	* Supply an id to the th element.
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether this row is expanded or not. This helps coordinate data
+	* attributes so that `TableExpandRow` and `TableExpandedRow` work together
+	*/
 	isExpanded: requiredIfGivenPropIsTruthy("enableToggle", PropTypes.bool),
+	/**
+	* Hook for when a listener initiates a request to expand the given row
+	*/
 	onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy("enableExpando", PropTypes.func), requiredIfGivenPropIsTruthy("enableToggle", PropTypes.func)])
 };
 //#endregion