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

package/lib/components/DataTable/TableToolbarMenu.js

@@ -42,10 +42,25 @@ const TableToolbarMenu = ({ className, renderIcon = _carbon_icons_react.Settings
 };
 TableToolbarMenu.propTypes = {
 	children: prop_types.default.node.isRequired,
+	/**
+	* Provide an optional class name for the toolbar menu
+	*/
 	className: prop_types.default.string,
+	/**
+	* The description of the menu icon.
+	*/
 	iconDescription: prop_types.default.string,
+	/**
+	* Provide an optional class name for the toolbar menu
+	*/
 	menuOptionsClass: prop_types.default.string,
+	/**
+	* 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 ToolbarMenu.
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",

package/lib/components/DataTable/TableToolbarSearch.js

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

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

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

package/lib/components/DatePicker/DatePicker.Skeleton.js

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

package/lib/components/DatePicker/DatePicker.js

@@ -452,31 +452,110 @@ const DatePicker = (0, react.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: prop_types.default.bool,
+	/**
+	* The DOM element the Flatpicker should be inserted into. `<body>` by default.
+	*/
 	appendTo: prop_types.default.object,
+	/**
+	* The child nodes.
+	*/
 	children: prop_types.default.node,
+	/**
+	* The CSS class names.
+	*/
 	className: prop_types.default.string,
+	/**
+	* flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+	*/
 	closeOnSelect: prop_types.default.bool,
+	/**
+	* The date format.
+	*/
 	dateFormat: prop_types.default.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: prop_types.default.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* The flatpickr `disable` option that allows a user to disable certain dates.
+	*/
 	disable: prop_types.default.array,
+	/**
+	* The flatpickr `enable` option that allows a user to enable certain dates.
+	*/
 	enable: prop_types.default.array,
+	/**
+	* The flatpickr `inline` option.
+	*/
 	inline: prop_types.default.bool,
+	/**
+	* Specify whether or not the control is invalid (Fluid only)
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* `true` to use the light version.
+	*/
 	light: require_deprecate.deprecate(prop_types.default.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: prop_types.default.oneOfType([prop_types.default.object, prop_types.default.oneOf(require_DatePickerLocales.SUPPORTED_LOCALES)]),
+	/**
+	* The maximum date that a user can pick to.
+	*/
 	maxDate: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* The minimum date that a user can start picking from.
+	*/
 	minDate: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* The `change` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* The `close` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onClose: prop_types.default.func,
+	/**
+	* The `open` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onOpen: prop_types.default.func,
+	/**
+	* flatpickr prop passthrough. Controls how dates are parsed.
+	*/
 	parseDate: prop_types.default.func,
+	/**
+	* whether the DatePicker is to be readOnly
+	* if boolean applies to all inputs
+	* if array applies to each input in order
+	*/
 	readOnly: prop_types.default.oneOfType([prop_types.default.bool, prop_types.default.array]),
+	/**
+	* `true` to use the short version.
+	*/
 	short: prop_types.default.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: prop_types.default.oneOfType([
 		prop_types.default.string,
 		prop_types.default.arrayOf(prop_types.default.oneOfType([
@@ -487,8 +566,17 @@ DatePicker.propTypes = {
 		prop_types.default.object,
 		prop_types.default.number
 	]),
+	/**
+	* Specify whether the control is currently in warning state (Fluid only)
+	*/
 	warn: prop_types.default.bool,
+	/**
+	* Accessible aria-label for the "next month" arrow icon.
+	*/
 	nextMonthAriaLabel: prop_types.default.string,
+	/**
+	* Accessible aria-label for the "previous month" arrow icon.
+	*/
 	prevMonthAriaLabel: prop_types.default.string
 };
 //#endregion

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -140,32 +140,92 @@ const DatePickerInput = (0, react.forwardRef)((props, ref) => {
 	});
 });
 DatePickerInput.propTypes = {
+	/**
+	* 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: prop_types.default.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Specify whether or not the input should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: prop_types.default.node,
+	/**
+	* Specify if the label should be hidden
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Specify an id that uniquely identifies the `<input>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify whether or not the input should be invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Specify the text to be rendered when the input is invalid
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: prop_types.default.node.isRequired,
+	/**
+	* Specify an `onChange` handler that is called whenever a change in the
+	* input field has occurred
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Provide a function to be called when the input field is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide a regular expression pattern string that the input value must match
+	*/
 	pattern: prop_types.default.string,
+	/**
+	* Specify the placeholder text
+	*/
 	placeholder: prop_types.default.string,
+	/**
+	* whether the DatePicker is to be readOnly
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
 	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 the type of the `<input>`
+	*/
 	type: prop_types.default.string,
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the control is in warning state
+	*/
 	warnText: prop_types.default.node
 };
 function DatePickerIcon({ datePickerType, invalid, warn, disabled, readOnly }) {
@@ -188,14 +248,33 @@ function DatePickerIcon({ datePickerType, invalid, warn, disabled, readOnly }) {
 	});
 }
 DatePickerIcon.propTypes = {
+	/**
+	* 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: prop_types.default.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* Specify whether or not the input should be invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: prop_types.default.bool,
+	/**
+	* Specify whether or not the input should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify whether the input is readonly
+	*/
 	readOnly: prop_types.default.bool
 };
 //#endregion

package/lib/components/Dialog/Dialog.js

@@ -108,18 +108,59 @@ const Dialog = react.default.forwardRef(({ children, className, focusAfterCloseR
 });
 Dialog.displayName = "Dialog";
 Dialog.propTypes = {
+	/**
+	* Provide children to be rendered inside of the Dialog
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the modal root node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide a ref to return focus to once the dialog is closed.
+	*/
 	focusAfterCloseRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.any })]),
+	/**
+	* Modal specifies whether the Dialog is modal or non-modal. This cannot be
+	* changed while open=true
+	*/
 	modal: prop_types.default.bool,
+	/**
+	* Specify a handler for closing Dialog.
+	* The handler should care of closing Dialog, e.g. changing `open` prop.
+	*/
 	onRequestClose: prop_types.default.func,
+	/**
+	* open initial state
+	*/
 	open: prop_types.default.bool,
+	/**
+	* Specify the role of the dialog for accessibility
+	*/
 	role: prop_types.default.oneOf(["dialog", "alertdialog"]),
+	/**
+	* Specify a label for screen readers
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Specify the ID of an element that labels this dialog
+	*/
 	"aria-labelledby": prop_types.default.string,
+	/**
+	* Specify the ID of an element that describes this dialog
+	*/
 	"aria-describedby": prop_types.default.string,
+	/**
+	* Specify a label for screen readers
+	*/
 	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`"),
+	/**
+	* Specify the ID of an element that labels this dialog
+	*/
 	ariaLabelledBy: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-labelledby`"),
+	/**
+	* Specify the ID of an element that describes this dialog
+	*/
 	ariaDescribedBy: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-describedby`")
 };
 const DialogHeader = react.default.forwardRef(({ children, ...rest }, ref) => {
@@ -131,7 +172,11 @@ const DialogHeader = react.default.forwardRef(({ children, ...rest }, ref) => {
 	});
 });
 DialogHeader.displayName = "DialogHeader";
-DialogHeader.propTypes = { children: prop_types.default.node };
+DialogHeader.propTypes = { 
+/**
+* Provide the contents to be rendered inside of this component
+*/
+children: prop_types.default.node };
 const DialogControls = react.default.forwardRef(({ children, ...rest }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `${require_usePrefix.usePrefix()}--dialog__header-controls`,
@@ -141,7 +186,11 @@ const DialogControls = react.default.forwardRef(({ children, ...rest }, ref) =>
 	});
 });
 DialogControls.displayName = "DialogControls";
-DialogControls.propTypes = { children: prop_types.default.node };
+DialogControls.propTypes = { 
+/**
+* Provide children to be rendered inside of this component
+*/
+children: prop_types.default.node };
 const DialogCloseButton = react.default.forwardRef(({ onClick, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
@@ -163,7 +212,11 @@ const DialogCloseButton = react.default.forwardRef(({ onClick, ...rest }, ref) =
 	});
 });
 DialogCloseButton.displayName = "DialogCloseButton";
-DialogCloseButton.propTypes = { onClick: prop_types.default.func };
+DialogCloseButton.propTypes = { 
+/**
+* Specify a click handler applied to the IconButton
+*/
+onClick: prop_types.default.func };
 const DialogTitle = react.default.forwardRef(({ children, className, id, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const { dialogId, setTitleId } = (0, react.useContext)(DialogContext);
@@ -184,8 +237,17 @@ const DialogTitle = react.default.forwardRef(({ children, className, id, ...rest
 });
 DialogTitle.displayName = "DialogTitle";
 DialogTitle.propTypes = {
+	/**
+	* Provide the contents to be rendered inside of this component
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the title node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify an optional id for the title element
+	*/
 	id: prop_types.default.string
 };
 const DialogSubtitle = react.default.forwardRef(({ children, className, id, ...rest }, ref) => {
@@ -208,8 +270,17 @@ const DialogSubtitle = react.default.forwardRef(({ children, className, id, ...r
 });
 DialogSubtitle.displayName = "DialogSubtitle";
 DialogSubtitle.propTypes = {
+	/**
+	* Provide the contents to be rendered inside of this component
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the subtitle node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify an optional id for the subtitle element
+	*/
 	id: prop_types.default.string
 };
 const DialogBody = react.default.forwardRef(({ children, className, hasScrollingContent, ...rest }, ref) => {
@@ -248,8 +319,17 @@ const DialogBody = react.default.forwardRef(({ children, className, hasScrolling
 });
 DialogBody.displayName = "DialogBody";
 DialogBody.propTypes = {
+	/**
+	* Provide the contents to be rendered inside of this component
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the body node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the content has overflow that should be scrollable
+	*/
 	hasScrollingContent: prop_types.default.bool
 };
 const DialogFooter = react.default.forwardRef(({ children, className, onRequestClose = require_noopFn.noopFn, onSecondarySubmit, onRequestSubmit = require_noopFn.noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, danger = false, dangerDescription = "", ...rest }, ref) => {
@@ -316,14 +396,41 @@ const DialogFooter = react.default.forwardRef(({ children, className, onRequestC
 });
 DialogFooter.displayName = "DialogFooter";
 DialogFooter.propTypes = {
+	/**
+	* Provide the contents to be rendered inside of this component
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the footer node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify a handler for closing dialog.
+	*/
 	onRequestClose: prop_types.default.func,
+	/**
+	* Specify a handler for the secondary button.
+	*/
 	onSecondarySubmit: prop_types.default.func,
+	/**
+	* Specify a handler for submitting dialog.
+	*/
 	onRequestSubmit: prop_types.default.func,
+	/**
+	* Specify the text for the primary button
+	*/
 	primaryButtonText: prop_types.default.node,
+	/**
+	* Specify whether the Button should be disabled, or not
+	*/
 	primaryButtonDisabled: prop_types.default.bool,
+	/**
+	* Specify the text for the secondary button
+	*/
 	secondaryButtonText: prop_types.default.node,
+	/**
+	* Specify an array of config objects for secondary buttons
+	*/
 	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`);
@@ -337,16 +444,36 @@ DialogFooter.propTypes = {
 		}
 		return null;
 	},
+	/**
+	* Specify whether the Dialog is for dangerous actions
+	*/
 	danger: prop_types.default.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: prop_types.default.string,
+	/**
+	* Specify loading status
+	*/
 	loadingStatus: prop_types.default.oneOf([
 		"inactive",
 		"active",
 		"finished",
 		"error"
 	]),
+	/**
+	* Specify the description for the loading text
+	*/
 	loadingDescription: prop_types.default.string,
+	/**
+	* Specify the description for the loading icon
+	*/
 	loadingIconDescription: prop_types.default.string,
+	/**
+	* Provide an optional handler to be invoked when loading is
+	* successful
+	*/
 	onLoadingSuccess: prop_types.default.func
 };
 //#endregion

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -31,8 +31,17 @@ const DropdownSkeleton = ({ className, size, hideLabel, ...rest }) => {
 	});
 };
 DropdownSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Specify the size of the ListBox.
+	*/
 	size: require_ListBoxPropTypes.ListBoxSizePropType
 };
 //#endregion