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

package/lib/components/CopyButton/CopyButton.js

@@ -48,6 +48,9 @@ function CopyButton({ align = "bottom", autoAlign = false, feedback = "Copied!",
 	});
 }
 CopyButton.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: require_deprecateValuesWithin.deprecateValuesWithin(prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -83,11 +86,34 @@ CopyButton.propTypes = {
 		"right-start",
 		"right-end"
 	], require_mapPopoverAlign.mapPopoverAlign),
+	/**
+	* **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 an optional className to be applied to the underlying `<button>`
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the string that is displayed when the button is clicked and the
+	* content is copied
+	*/
 	feedback: prop_types.default.string,
+	/**
+	* Specify the time it takes for the feedback message to timeout
+	*/
 	feedbackTimeout: prop_types.default.number,
+	/**
+	* Provide a description for the icon representing the copy action that can
+	* be read by screen readers
+	*/
 	iconDescription: prop_types.default.string,
+	/**
+	* Specify an optional `onClick` handler that is called when the underlying
+	* `<button>` is clicked
+	*/
 	onClick: prop_types.default.func
 };
 //#endregion

package/lib/components/DataTable/DataTable.js

@@ -455,25 +455,68 @@ DataTable.TableToolbarContent = require_TableToolbarContent.default;
 DataTable.TableToolbarSearch = require_TableToolbarSearch.default;
 DataTable.TableToolbarMenu = require_TableToolbarMenu.default;
 DataTable.propTypes = {
+	/**
+	* Pass in the children that will be rendered within the Table
+	*/
 	children: prop_types.default.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: prop_types.default.bool,
+	/**
+	* Optional hook to manually control filtering of the rows from the
+	* TableToolbarSearch component
+	*/
 	filterRows: prop_types.default.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: prop_types.default.arrayOf(prop_types.default.shape({
 		key: prop_types.default.string.isRequired,
 		header: prop_types.default.node.isRequired,
 		isSortable: prop_types.default.bool
 	})).isRequired,
+	/**
+	* Specify whether the table should be able to be sorted by its headers
+	*/
 	isSortable: prop_types.default.bool,
+	/**
+	* Provide a string for the current locale
+	*/
 	locale: prop_types.default.string,
+	/**
+	* Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+	*/
 	overflowMenuOnHover: prop_types.default.bool,
+	/**
+	* Specify whether the control should be a radio button or inline checkbox
+	*/
 	radio: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: prop_types.default.arrayOf(prop_types.default.shape({
 		id: prop_types.default.string.isRequired,
 		disabled: prop_types.default.bool,
 		isSelected: prop_types.default.bool,
 		isExpanded: prop_types.default.bool
 	})).isRequired,
+	/**
+	*  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",
@@ -481,10 +524,26 @@ DataTable.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* Optional hook to manually control sorting of the rows.
+	*/
 	sortRow: prop_types.default.func,
+	/**
+	* Specify whether the header should be sticky.
+	* Still experimental: may not work with every combination of table props
+	*/
 	stickyHeader: prop_types.default.bool,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.func,
+	/**
+	* If `true`, sets the table width to `auto` instead of `100%`.
+	*/
 	useStaticWidth: prop_types.default.bool,
+	/**
+	* `true` to add useZebraStyles striping.
+	*/
 	useZebraStyles: prop_types.default.bool
 };
 //#endregion

package/lib/components/DataTable/Table.js

@@ -105,11 +105,26 @@ const Table = ({ className, children, useZebraStyles, size = "lg", isSortable =
 	}) : table;
 };
 Table.propTypes = {
+	/**
+	* Pass in the children that will be rendered within the Table
+	*/
 	children: prop_types.default.node,
 	className: prop_types.default.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: prop_types.default.bool,
+	/**
+	* `false` If true, will apply sorting styles
+	*/
 	isSortable: prop_types.default.bool,
+	/**
+	* Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+	*/
 	overflowMenuOnHover: prop_types.default.bool,
+	/**
+	*  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",
@@ -117,9 +132,21 @@ Table.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* `false` If true, will keep the header sticky (only data rows will scroll)
+	*/
 	stickyHeader: prop_types.default.bool,
+	/**
+	* If `true`, sets the table width to `auto` instead of `100%`.
+	*/
 	useStaticWidth: prop_types.default.bool,
+	/**
+	* `true` to add useZebraStyles striping.
+	*/
 	useZebraStyles: prop_types.default.bool,
+	/**
+	* Specify the table tabIndex
+	*/
 	tabIndex: prop_types.default.number
 };
 //#endregion

package/lib/components/DataTable/TableBatchAction.js

@@ -26,10 +26,20 @@ const TableBatchAction = ({ renderIcon = _carbon_icons_react.AddFilled, iconDesc
 	...props
 });
 TableBatchAction.propTypes = {
+	/**
+	* Specify if the button is an icon-only button
+	*/
 	hasIconOnly: prop_types.default.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: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
 };
 //#endregion

package/lib/components/DataTable/TableBatchActions.js

@@ -87,11 +87,35 @@ const TableBatchActions = ({ className, children, shouldShowBatchActions, totalS
 TableBatchActions.propTypes = {
 	children: prop_types.default.node,
 	className: prop_types.default.string,
+	/**
+	* Hook required to listen for when the user initiates a cancel request
+	* through this component
+	*/
 	onCancel: prop_types.default.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: prop_types.default.func,
+	/**
+	* Boolean specifier for whether or not the batch action bar should be
+	* displayed
+	*/
 	shouldShowBatchActions: prop_types.default.bool,
+	/**
+	* Numeric representation of the total number of items in a table.
+	* This number is used in the select all button text
+	*/
 	totalCount: prop_types.default.number,
+	/**
+	* Numeric representation of the total number of items selected in a table.
+	* This number is used to derive the selection message
+	*/
 	totalSelected: prop_types.default.number.isRequired,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.func
 };
 //#endregion

package/lib/components/DataTable/TableBody.js

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

package/lib/components/DataTable/TableCell.js

@@ -34,10 +34,25 @@ const TableCell = (0, react.forwardRef)((props, ref) => {
 });
 TableCell.displayName = "TableCell";
 TableCell.propTypes = {
+	/**
+	* Pass in children that will be embedded in the table header label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* The width of the expanded row's internal cell
+	*/
 	colSpan: prop_types.default.number,
+	/**
+	* Specify if the table cell is in an AI column
+	*/
 	hasAILabelHeader: prop_types.default.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: prop_types.default.string
 };
 //#endregion

package/lib/components/DataTable/TableContainer.js

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

package/lib/components/DataTable/TableContext.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-require("../../_virtual/_rolldown/runtime.js");
 //#region src/components/DataTable/TableContext.tsx
 /**
 * Copyright IBM Corp. 2016, 2023

package/lib/components/DataTable/TableDecoratorRow.js

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

package/lib/components/DataTable/TableExpandHeader.js

@@ -48,16 +48,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"]: prop_types.default.string,
+	/**
+	* Specify the string read by a voice reader when the expand trigger is
+	* focused
+	*/
 	["aria-label"]: prop_types.default.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the string read by a voice reader when the expand trigger is
+	* focused
+	*/
 	ariaLabel: prop_types.default.string,
 	children: prop_types.default.node,
 	className: prop_types.default.string,
+	/**
+	* The enableExpando prop is being replaced by TableExpandHeader
+	*/
 	enableExpando: require_deprecate.deprecate(prop_types.default.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: prop_types.default.bool,
+	/**
+	* The description of the chevron right icon, to be put in its SVG `<title>` element.
+	*/
 	expandIconDescription: prop_types.default.string,
+	/**
+	* Supply an id to the th element.
+	*/
 	id: prop_types.default.string,
+	/**
+	* Specify whether this row is expanded or not. This helps coordinate data
+	* attributes so that `TableExpandRow` and `TableExpandedRow` work together
+	*/
 	isExpanded: require_requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy("enableToggle", prop_types.default.bool),
+	/**
+	* Hook for when a listener initiates a request to expand the given row
+	*/
 	onExpand: prop_types.default.oneOfType([require_requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy("enableExpando", prop_types.default.func), require_requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy("enableToggle", prop_types.default.func)])
 };
 //#endregion

package/lib/components/DataTable/TableExpandRow.js

@@ -79,15 +79,44 @@ const TableExpandRow = (0, react.forwardRef)(({ ["aria-controls"]: ariaControls,
 	});
 });
 TableExpandRow.propTypes = {
+	/**
+	* Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+	* TODO: make this required in v12
+	*/
 	"aria-controls": prop_types.default.string,
+	/**
+	* Specify the string read by a voice reader when the expand trigger is
+	* focused
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the string read by a voice reader when the expand trigger is
+	* focused
+	*/
 	ariaLabel: prop_types.default.string,
 	children: prop_types.default.node,
 	className: prop_types.default.string,
+	/**
+	* 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
+	*/
 	expandHeader: prop_types.default.string,
+	/**
+	* The description of the chevron right icon, to be put in its SVG `<title>` element.
+	*/
 	expandIconDescription: prop_types.default.string,
+	/**
+	* Specify whether this row is expanded or not. This helps coordinate data
+	* attributes so that `TableExpandRow` and `TableExpandedRow` work together
+	*/
 	isExpanded: prop_types.default.bool,
+	/**
+	* Specify if the row is selected
+	*/
 	isSelected: prop_types.default.bool,
+	/**
+	* Hook for when a listener initiates a request to expand the given row
+	*/
 	onExpand: prop_types.default.func.isRequired
 };
 TableExpandRow.displayName = "TableExpandRow";

package/lib/components/DataTable/TableExpandedRow.js

@@ -50,8 +50,17 @@ const TableExpandedRow = ({ className: customClassName, children, colSpan, ...re
 	});
 };
 TableExpandedRow.propTypes = {
+	/**
+	* Pass in the contents for your TableExpandedRow
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* The width of the expanded row's internal cell
+	*/
 	colSpan: prop_types.default.number.isRequired
 };
 //#endregion

package/lib/components/DataTable/TableHeader.js

@@ -139,15 +139,50 @@ const TableHeader = (0, react.forwardRef)((props, ref) => {
 	});
 });
 TableHeader.propTypes = {
+	/**
+	* Pass in children that will be embedded in the table header label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify `colSpan` as a non-negative integer value to indicate how
+	* many columns the TableHeader cell extends in a table
+	*/
 	colSpan: prop_types.default.number,
+	/**
+	* Supply an id to the th element.
+	*/
 	id: prop_types.default.string,
+	/**
+	* Specify whether this header is the header by which a table is being sorted
+	* by
+	*/
 	isSortHeader: prop_types.default.bool,
+	/**
+	* Specify whether this header is one through which a user can sort the table
+	*/
 	isSortable: prop_types.default.bool,
+	/**
+	* Hook that is invoked when the header is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Specify the scope of this table header. You can find more info about this
+	* attribute at the following URL:
+	* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+	*/
 	scope: prop_types.default.string,
+	/**
+	* Specify which direction we are currently sorting by, should be one of DESC,
+	* NONE, or ASC.
+	*/
 	sortDirection: prop_types.default.oneOf(Object.values(require_sortStates.sortStates)),
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.func
 };
 TableHeader.displayName = "TableHeader";

package/lib/components/DataTable/TableRow.js

@@ -43,12 +43,33 @@ const TableRow = (0, react.forwardRef)((props, ref) => {
 	});
 });
 TableRow.propTypes = {
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify if the row is selected
+	*/
 	isSelected: prop_types.default.bool,
+	/**
+	* Non-standard alias for `aria-label`.
+	*/
 	ariaLabel: prop_types.default.string,
+	/**
+	* Accessible label for the row element.
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Associates this row with the id of the corresponding expanded row content.
+	*/
 	"aria-controls": prop_types.default.string,
+	/**
+	* Handler called when the row’s expand toggle is clicked.
+	*/
 	onExpand: prop_types.default.func,
+	/**
+	* Flag indicating whether the row is currently expanded.
+	*/
 	isExpanded: prop_types.default.bool
 };
 //#endregion

package/lib/components/DataTable/TableSelectAll.js

@@ -40,14 +40,42 @@ const TableSelectAll = ({ ariaLabel: deprecatedAriaLabel = "Select all rows in t
 	});
 };
 TableSelectAll.propTypes = {
+	/**
+	* Specify the aria label for the underlying input control
+	*/
 	["aria-label"]: prop_types.default.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the aria label for the underlying input control
+	*/
 	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* Specify whether all items are selected, or not
+	*/
 	checked: prop_types.default.bool,
+	/**
+	* The CSS class names of the cell that wraps the underlying input control
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the checkbox input should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide an `id` for the underlying input control
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify whether the selection only has a subset of all items
+	*/
 	indeterminate: prop_types.default.bool,
+	/**
+	* Provide a `name` for the underlying input control
+	*/
 	name: prop_types.default.string.isRequired,
+	/**
+	* Provide a handler to listen to when a user initiates a selection request
+	*/
 	onSelect: prop_types.default.func.isRequired
 };
 //#endregion

package/lib/components/DataTable/TableSelectRow.js

@@ -61,15 +61,46 @@ const TableSelectRow = ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLa
 	});
 };
 TableSelectRow.propTypes = {
+	/**
+	* Specify the aria label for the underlying input control
+	*/
 	["aria-label"]: prop_types.default.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the aria label for the underlying input control
+	*/
 	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* Specify whether this row is selected, or not
+	*/
 	checked: prop_types.default.bool,
+	/**
+	* The CSS class names of the cell that wraps the underlying input control
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide an `id` for the underlying input control
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Provide a `name` for the underlying input control
+	*/
 	name: prop_types.default.string.isRequired,
+	/**
+	* Provide an optional hook that is called each time the input is updated
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Provide a handler to listen to when a user initiates a selection request
+	*/
 	onSelect: prop_types.default.func.isRequired,
+	/**
+	* Specify whether the control should be a radio button or inline checkbox
+	*/
 	radio: prop_types.default.bool
 };
 //#endregion

package/lib/components/DataTable/TableSlugRow.js

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

package/lib/components/DataTable/TableToolbar.js

@@ -43,9 +43,24 @@ const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLa
 	});
 };
 TableToolbar.propTypes = {
+	/**
+	* 'aria-label' of the TableToolbar component.
+	* Specify a label to be read by screen readers on the container node
+	*/
 	["aria-label"]: prop_types.default.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify a label to be read by screen readers on the container node.
+	* 'aria-label' of the TableToolbar component.
+	*/
 	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* Pass in the children that will be rendered inside the TableToolbar
+	*/
 	children: prop_types.default.node,
+	/**
+	* `lg` Change the row height of table
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",