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

package/es/components/DataTable/TableExpandRow.js

@@ -75,15 +75,44 @@ const TableExpandRow = forwardRef(({ ["aria-controls"]: ariaControls, ["aria-lab
 	});
 });
 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": 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 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: PropTypes.string,
+	/**
+	* The description of the chevron right icon, to be put in its SVG `<title>` element.
+	*/
 	expandIconDescription: PropTypes.string,
+	/**
+	* Specify whether this row is expanded or not. This helps coordinate data
+	* attributes so that `TableExpandRow` and `TableExpandedRow` work together
+	*/
 	isExpanded: PropTypes.bool,
+	/**
+	* Specify if the row is selected
+	*/
 	isSelected: PropTypes.bool,
+	/**
+	* Hook for when a listener initiates a request to expand the given row
+	*/
 	onExpand: PropTypes.func.isRequired
 };
 TableExpandRow.displayName = "TableExpandRow";

package/es/components/DataTable/TableExpandedRow.js

@@ -46,8 +46,17 @@ const TableExpandedRow = ({ className: customClassName, children, colSpan, ...re
 	});
 };
 TableExpandedRow.propTypes = {
+	/**
+	* Pass in the contents for your TableExpandedRow
+	*/
 	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.isRequired
 };
 //#endregion

package/es/components/DataTable/TableHeader.js

@@ -135,15 +135,50 @@ const TableHeader = forwardRef((props, ref) => {
 	});
 });
 TableHeader.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,
+	/**
+	* Specify `colSpan` as a non-negative integer value to indicate how
+	* many columns the TableHeader cell extends in a table
+	*/
 	colSpan: PropTypes.number,
+	/**
+	* Supply an id to the th element.
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether this header is the header by which a table is being sorted
+	* by
+	*/
 	isSortHeader: PropTypes.bool,
+	/**
+	* Specify whether this header is one through which a user can sort the table
+	*/
 	isSortable: PropTypes.bool,
+	/**
+	* Hook that is invoked when the header is clicked
+	*/
 	onClick: PropTypes.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: PropTypes.string,
+	/**
+	* Specify which direction we are currently sorting by, should be one of DESC,
+	* NONE, or ASC.
+	*/
 	sortDirection: PropTypes.oneOf(Object.values(sortStates)),
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func
 };
 TableHeader.displayName = "TableHeader";

package/es/components/DataTable/TableRow.js

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

package/es/components/DataTable/TableSelectAll.js

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

package/es/components/DataTable/TableSelectRow.js

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

package/es/components/DataTable/TableSlugRow.js

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

package/es/components/DataTable/TableToolbar.js

@@ -39,9 +39,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"]: PropTypes.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: deprecate(PropTypes.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: PropTypes.node,
+	/**
+	* `lg` Change the row height of table
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",

package/es/components/DataTable/TableToolbarMenu.js

@@ -38,10 +38,25 @@ const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription =
 };
 TableToolbarMenu.propTypes = {
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class name for the toolbar menu
+	*/
 	className: PropTypes.string,
+	/**
+	* The description of the menu icon.
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Provide an optional class name for the toolbar menu
+	*/
 	menuOptionsClass: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify the size of the ToolbarMenu.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",

package/es/components/DataTable/TableToolbarSearch.js

@@ -87,28 +87,86 @@ const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChang
 };
 TableToolbarSearch.propTypes = {
 	children: PropTypes.node,
+	/**
+	* Provide an optional class name for the search container
+	*/
 	className: PropTypes.string,
+	/**
+	* Specifies if the search should initially render in an expanded state
+	*/
 	defaultExpanded: PropTypes.bool,
+	/**
+	* Provide an optional default value for the Search component
+	*/
 	defaultValue: PropTypes.string,
+	/**
+	* Specifies if the search should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specifies if the search should expand
+	*/
 	expanded: PropTypes.bool,
+	/**
+	* Provide an optional id for the search container
+	*/
 	id: PropTypes.string,
+	/**
+	* Provide an optional label text for the Search component icon
+	*/
 	labelText: PropTypes.string,
+	/**
+	* Provide an optional function to be called when the search input loses focus, this will be
+	* passed the event as the first parameter and a function to handle the expanding of the search
+	* input as the second
+	*/
 	onBlur: PropTypes.func,
+	/**
+	* Provide an optional hook that is called each time the input is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: PropTypes.func,
+	/**
+	* Provide an optional hook that is called each time the input is expanded
+	*/
 	onExpand: PropTypes.func,
+	/**
+	* Provide an optional function to be called when the search input gains focus, this will be
+	* passed the event as the first parameter and a function to handle the expanding of the search
+	* input as the second.
+	*/
 	onFocus: PropTypes.func,
+	/**
+	* Whether the search should be allowed to expand
+	*/
 	persistent: PropTypes.bool,
+	/**
+	* Provide an optional placeholder text for the Search component
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* Provide an optional className for the overall container of the Search
+	*/
 	searchContainerClass: PropTypes.string,
+	/**
+	* Specify the size of the Search
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+	*/
 	tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func
 };
 //#endregion

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -56,12 +56,33 @@ const DataTableSkeleton = ({ headers, rowCount = 5, columnCount = 5, zebra = fal
 	});
 };
 DataTableSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the number of columns that you want to render in the skeleton state
+	*/
 	columnCount: PropTypes.number,
+	/**
+	* Optionally specify the displayed headers
+	*/
 	headers: PropTypes.arrayOf(PropTypes.shape({ header: PropTypes.node.isRequired }).isRequired),
+	/**
+	* Specify the number of rows that you want to render in the skeleton state
+	*/
 	rowCount: PropTypes.number,
+	/**
+	* Specify if the table header should be rendered as part of the skeleton.
+	*/
 	showHeader: PropTypes.bool,
+	/**
+	* Specify if the table toolbar should be rendered as part of the skeleton.
+	*/
 	showToolbar: PropTypes.bool,
+	/**
+	* Changes the row height of table.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
@@ -69,6 +90,9 @@ DataTableSkeleton.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* Optionally specify whether you want the DataTable to be zebra striped
+	*/
 	zebra: PropTypes.bool
 };
 //#endregion

package/es/components/DatePicker/DatePicker.Skeleton.js

@@ -44,9 +44,21 @@ const DatePickerSkeleton = ({ range, id, hideLabel, className, ...rest }) => {
 	});
 };
 DatePickerSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether to hide the label.
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Specify the id to add.
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether to render the range skeleton variant.
+	*/
 	range: PropTypes.bool
 };
 //#endregion

package/es/components/DatePicker/DatePicker.js

@@ -446,31 +446,110 @@ const DatePicker = forwardRef((props, ref) => {
 	});
 });
 DatePicker.propTypes = {
+	/**
+	* Flatpickr prop passthrough enables direct date input, and when set to
+	* false, we must clear dates manually by resetting the value prop to an empty
+	* value (such as `""`, `null`, or `undefined`) or an array of all empty
+	* values, making it a controlled input.
+	*/
 	allowInput: PropTypes.bool,
+	/**
+	* The DOM element the Flatpicker should be inserted into. `<body>` by default.
+	*/
 	appendTo: PropTypes.object,
+	/**
+	* The child nodes.
+	*/
 	children: PropTypes.node,
+	/**
+	* The CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+	*/
 	closeOnSelect: PropTypes.bool,
+	/**
+	* The date format.
+	*/
 	dateFormat: PropTypes.string,
+	/**
+	* The type of the date picker:
+	*
+	* * `simple` - Without calendar dropdown.
+	* * `single` - With calendar dropdown and single date.
+	* * `range` - With calendar dropdown and a date range.
+	*/
 	datePickerType: PropTypes.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* The flatpickr `disable` option that allows a user to disable certain dates.
+	*/
 	disable: PropTypes.array,
+	/**
+	* The flatpickr `enable` option that allows a user to enable certain dates.
+	*/
 	enable: PropTypes.array,
+	/**
+	* The flatpickr `inline` option.
+	*/
 	inline: PropTypes.bool,
+	/**
+	* Specify whether or not the control is invalid (Fluid only)
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* `true` to use the light version.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `DatePicker` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	*  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+	*/
 	locale: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(SUPPORTED_LOCALES)]),
+	/**
+	* The maximum date that a user can pick to.
+	*/
 	maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* The minimum date that a user can start picking from.
+	*/
 	minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* The `change` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onChange: PropTypes.func,
+	/**
+	* The `close` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onClose: PropTypes.func,
+	/**
+	* The `open` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onOpen: PropTypes.func,
+	/**
+	* flatpickr prop passthrough. Controls how dates are parsed.
+	*/
 	parseDate: PropTypes.func,
+	/**
+	* whether the DatePicker is to be readOnly
+	* if boolean applies to all inputs
+	* if array applies to each input in order
+	*/
 	readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+	/**
+	* `true` to use the short version.
+	*/
 	short: PropTypes.bool,
+	/**
+	* The value of the date value provided to flatpickr, could
+	* be a date, a date number, a date string, an array of dates.
+	*/
 	value: PropTypes.oneOfType([
 		PropTypes.string,
 		PropTypes.arrayOf(PropTypes.oneOfType([
@@ -481,8 +560,17 @@ DatePicker.propTypes = {
 		PropTypes.object,
 		PropTypes.number
 	]),
+	/**
+	* Specify whether the control is currently in warning state (Fluid only)
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Accessible aria-label for the "next month" arrow icon.
+	*/
 	nextMonthAriaLabel: PropTypes.string,
+	/**
+	* Accessible aria-label for the "previous month" arrow icon.
+	*/
 	prevMonthAriaLabel: PropTypes.string
 };
 //#endregion