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

package/es/components/Tile/Tile.js

@@ -55,11 +55,33 @@ const Tile = React.forwardRef(({ children, className, decorator, light = false,
 });
 Tile.displayName = "Tile";
 Tile.propTypes = {
+	/**
+	* The child nodes.
+	*/
 	children: PropTypes.node,
+	/**
+	* The CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
+	* when an AILabel is present
+	*/
 	hasRoundedCorners: PropTypes.bool,
+	/**
+	* `true` to use the light version. For use on $ui-01 backgrounds only.
+	* Don't use this to make tile background color same as container background color.
+	*
+	* @deprecated
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `Tile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.")
 };
 const ClickableTile = React.forwardRef(({ children, className, clicked = false, decorator, disabled, href, light, onClick = () => {}, onKeyDown = () => {}, renderIcon: Icon, hasRoundedCorners, slug, ...rest }, ref) => {
@@ -124,17 +146,55 @@ const ClickableTile = React.forwardRef(({ children, className, clicked = false,
 });
 ClickableTile.displayName = "ClickableTile";
 ClickableTile.propTypes = {
+	/**
+	* The child nodes.
+	*/
 	children: PropTypes.node,
+	/**
+	* The CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* Boolean for whether a tile has been clicked.
+	*/
 	clicked: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+	*/
 	decorator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+	/**
+	* Specify whether the ClickableTile should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: PropTypes.bool,
+	/**
+	* The href for the link.
+	*/
 	href: PropTypes.string,
+	/**
+	* `true` to use the light version. For use on $ui-01 backgrounds only.
+	* Don't use this to make tile background color same as container background color.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	/**
+	* Specify the function to run when the ClickableTile is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Specify the function to run when the ClickableTile is interacted with via a keyboard
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* The rel property for the link.
+	*/
 	rel: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 const SelectableTile = React.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title = "title", slug, hasRoundedCorners, ...rest }, ref) => {
@@ -211,19 +271,65 @@ const SelectableTile = React.forwardRef(({ children, className, decorator, disab
 SelectableTile.propTypes = {
 	children: PropTypes.node,
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify whether the SelectableTile should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: PropTypes.bool,
+	/**
+	* The ID of the `<input>`.
+	*/
 	id: PropTypes.string,
+	/**
+	* `true` to use the light version. For use on $ui-01 backgrounds only.
+	* Don't use this to make tile background color same as container background color.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	/**
+	* The `name` of the `<input>`.
+	* @deprecated
+	*/
 	name: deprecate(PropTypes.string, "The `name` property is no longer used.  It will be removed in the next major release."),
+	/**
+	* The empty handler of the `<input>`.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Specify the function to run when the SelectableTile is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Specify the function to run when the SelectableTile is interacted with via a keyboard
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* `true` to select this tile.
+	*/
 	selected: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `SelectableTile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
+	/**
+	* Specify the tab index of the wrapper element
+	*/
 	tabIndex: PropTypes.number,
+	/**
+	* The `title` of the `<input>`.
+	*/
 	title: PropTypes.string,
+	/**
+	* The value of the `<input>`.
+	* @deprecated
+	*/
 	value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), "The `value` property is no longer used.  It will be removed in the next major release.`")
 };
 const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorator, expanded = false, tileMaxHeight = 0, tilePadding = 0, onClick, onKeyUp, tileCollapsedIconText = "Interact to expand Tile", tileExpandedIconText = "Interact to collapse Tile", tileCollapsedLabel, tileExpandedLabel, light, slug, hasRoundedCorners, ...rest }, forwardRef) => {
@@ -374,18 +480,59 @@ const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorato
 ExpandableTile.propTypes = {
 	children: PropTypes.node,
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* `true` if the tile is expanded.
+	*/
 	expanded: PropTypes.bool,
+	/**
+	* Specify if the `ExpandableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: PropTypes.bool,
+	/**
+	* An ID that can be provided to aria-labelledby
+	*/
 	id: PropTypes.string,
+	/**
+	* `true` to use the light version. For use on $ui-01 backgrounds only.
+	* Don't use this to make tile background color same as container background color.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	/**
+	* Specify the function to run when the ExpandableTile is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* optional handler to trigger a function when a key is pressed
+	*/
 	onKeyUp: PropTypes.func,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `ExpandableTile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
+	/**
+	* The `tabindex` attribute.
+	*/
 	tabIndex: PropTypes.number,
+	/**
+	* The description of the "collapsed" icon that can be read by screen readers.
+	*/
 	tileCollapsedIconText: PropTypes.string,
+	/**
+	* When "collapsed", a label to appear next to the chevron (e.g., "View more").
+	*/
 	tileCollapsedLabel: PropTypes.string,
+	/**
+	* The description of the "expanded" icon that can be read by screen readers.
+	*/
 	tileExpandedIconText: PropTypes.string,
+	/**
+	* When "expanded", a label to appear next to the chevron (e.g., "View less").
+	*/
 	tileExpandedLabel: PropTypes.string
 };
 ExpandableTile.displayName = "ExpandableTile";
@@ -396,7 +543,11 @@ const TileAboveTheFoldContent = React.forwardRef(({ children }, ref) => {
 		children
 	});
 });
-TileAboveTheFoldContent.propTypes = { children: PropTypes.node };
+TileAboveTheFoldContent.propTypes = { 
+/**
+* The child nodes.
+*/
+children: PropTypes.node };
 TileAboveTheFoldContent.displayName = "TileAboveTheFoldContent";
 const TileBelowTheFoldContent = React.forwardRef(({ children }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -405,7 +556,11 @@ const TileBelowTheFoldContent = React.forwardRef(({ children }, ref) => {
 		children
 	});
 });
-TileBelowTheFoldContent.propTypes = { children: PropTypes.node };
+TileBelowTheFoldContent.propTypes = { 
+/**
+* The child nodes.
+*/
+children: PropTypes.node };
 TileBelowTheFoldContent.displayName = "TileBelowTheFoldContent";
 //#endregion
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent };

package/es/components/TileGroup/TileGroup.js

@@ -65,14 +65,42 @@ const TileGroup = ({ children, className, defaultSelected, disabled, legend, nam
 };
 TileGroup.displayName = "TileGroup";
 TileGroup.propTypes = {
+	/**
+	* Provide a collection of <RadioTile> components to render in the group
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the the value of <RadioTile> to be selected by default
+	*/
 	defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the group is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide an optional legend for this group
+	*/
 	legend: PropTypes.string,
+	/**
+	* Specify the name of the underlying `<input>` nodes
+	*/
 	name: PropTypes.string.isRequired,
+	/**
+	* Provide an optional `onChange` hook that is called whenever the value of
+	* the group changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* `true` to specify if input selection in group is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* Specify the value that is currently selected in the group
+	*/
 	valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 //#endregion

package/es/components/TimePicker/TimePicker.js

@@ -130,30 +130,97 @@ const TimePicker = forwardRef((props, ref) => {
 	});
 });
 TimePicker.propTypes = {
+	/**
+	* Pass in the children that will be rendered next to the form control
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether you want the underlying label to be visually hidden
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify whether the control is currently invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node,
+	/**
+	* The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead."),
+	/**
+	* Specify the maximum length of the time string in `<input>`
+	*/
 	maxLength: PropTypes.number,
+	/**
+	* Optionally provide an `onBlur` handler that is called whenever the
+	* `<input>` loses focus
+	*/
 	onBlur: PropTypes.func,
+	/**
+	* Optionally provide an `onChange` handler that is called whenever `<input>`
+	* is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optionally provide an `onClick` handler that is called whenever the
+	* `<input>` is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Specify the regular expression working as the pattern of the time string in `<input>`
+	*/
 	pattern: PropTypes.string,
+	/**
+	* Specify the placeholder attribute for the `<input>`
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* Specify whether the TimePicker should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the size of the Time Picker.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify the type of the `<input>`
+	*/
 	type: PropTypes.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: PropTypes.string,
+	/**
+	* Specify a warning message
+	*/
 	warning: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an warning state
+	*/
 	warningText: PropTypes.node
 };
 //#endregion

package/es/components/TimePickerSelect/TimePickerSelect.js

@@ -42,10 +42,25 @@ const TimePickerSelect = forwardRef((props, ref) => {
 	});
 });
 TimePickerSelect.propTypes = {
+	/**
+	* Provide the contents of your TimePickerSelect
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the node containing the label and the select box
+	*/
 	className: PropTypes.string,
+	/**
+	* Optionally provide the default value of the `<select>`
+	*/
 	defaultValue: PropTypes.any,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<select>`
+	*/
 	id: PropTypes.string.isRequired
 };
 //#endregion

package/es/components/Toggle/Toggle.js

@@ -92,19 +92,65 @@ function Toggle({ "aria-labelledby": ariaLabelledby, className, defaultToggled =
 	});
 }
 Toggle.propTypes = {
+	/**
+	* Specify another element's id to be used as the label for this toggle
+	*/
 	"aria-labelledby": PropTypes.string,
+	/**
+	* Specify a custom className to apply to the form-item node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the toggle should be on by default
+	*/
 	defaultToggled: PropTypes.bool,
+	/**
+	* Whether this control should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* If true, the side labels (props.labelA and props.labelB) will be replaced by
+	* props.labelText (if passed), so that the toggle doesn't render a top label.
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Provide an id that unique represents the underlying `<button>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify the label for the "off" position
+	*/
 	labelA: PropTypes.node,
+	/**
+	* Specify the label for the "on" position
+	*/
 	labelB: PropTypes.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control. This should be provided unless 'aria-labelledby' is set instead
+	* or you use an external <label> element with its "for" attribute set to the
+	* toggle's id.
+	*/
 	labelText: PropTypes.string,
+	/**
+	* Provide an event listener that is called when the control is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Provide an event listener that is called when the control is toggled
+	*/
 	onToggle: PropTypes.func,
+	/**
+	* Whether the toggle should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+	*/
 	size: PropTypes.oneOf(["sm", "md"]),
+	/**
+	* Specify whether the control is toggled
+	*/
 	toggled: PropTypes.bool
 };
 //#endregion

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -47,8 +47,19 @@ const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
 };
 ToggleSmallSkeleton.propTypes = {
 	["aria-label"]: PropTypes.string.isRequired,
+	/**
+	* Specify an optional className to add to the form item wrapper.
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide an id that unique represents the underlying `<input>`
+	*/
 	id: PropTypes.string,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control. `aria-label` is always required but will be `null` if `labelText`
+	* is also provided.
+	*/
 	labelText: PropTypes.string
 };
 //#endregion

package/es/components/Toggletip/index.js

@@ -33,8 +33,19 @@ function ToggletipLabel({ as: BaseComponent = "span", children, className: custo
 	});
 }
 ToggletipLabel.propTypes = {
+	/**
+	* Provide a custom element or component to render the top-level node for the
+	* component.
+	*/
 	as: PropTypes.elementType,
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: PropTypes.string
 };
 const ToggletipContext = React.createContext(void 0);
@@ -126,6 +137,9 @@ function Toggletip({ align, as, autoAlign, className: customClassName, children,
 const { open, ...popoverNonOpenPropTypes } = Popover.propTypes ?? {};
 Toggletip.propTypes = {
 	...popoverNonOpenPropTypes,
+	/**
+	* Specify if the toggletip should be open by default
+	*/
 	defaultOpen: PropTypes.bool
 };
 /**
@@ -153,8 +167,18 @@ const ToggletipButton = forwardRef(function ToggletipButton({ children, classNam
 	});
 });
 ToggletipButton.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide an accessible label for this button
+	*/
 	label: PropTypes.string
 };
 ToggletipButton.displayName = "ToggletipButton";
@@ -178,7 +202,14 @@ const ToggletipContent = forwardRef((props, ref) => {
 	});
 });
 ToggletipContent.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: PropTypes.string
 };
 ToggletipContent.displayName = "ToggletipContent";
@@ -193,7 +224,14 @@ function ToggletipActions({ children, className: customClassName }) {
 	});
 }
 ToggletipActions.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: PropTypes.string
 };
 //#endregion

package/es/components/Tooltip/DefinitionTooltip.js

@@ -71,6 +71,9 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 	});
 };
 DefinitionTooltip.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -93,14 +96,47 @@ DefinitionTooltip.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* Will auto-align the popover. This prop is currently experimental and is
+	* subject to future changes. Requires React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: PropTypes.bool,
+	/**
+	* The `children` prop will be used as the value that is being defined
+	*/
 	children: PropTypes.node.isRequired,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the tooltip should be open when it first renders
+	*/
 	defaultOpen: PropTypes.bool,
+	/**
+	* The `definition` prop is used as the content inside of the tooltip that
+	* appears when a user interacts with the element rendered by the `children`
+	* prop
+	*/
 	definition: PropTypes.node.isRequired,
+	/**
+	* Provide a value that will be assigned as the id of the tooltip
+	*/
 	id: PropTypes.string,
+	/**
+	* Specifies whether or not the `DefinitionTooltip` should open on hover or not
+	*/
 	openOnHover: PropTypes.bool,
+	/**
+	* [Deprecated in v11] Please use the `definition` prop instead.
+	*
+	* Provide the text that will be displayed in the tooltip when it is rendered.
+	*/
 	tooltipText: deprecate(PropTypes.node, "The tooltipText prop has been deprecated. Please use the `definition` prop instead."),
+	/**
+	* The CSS class name of the trigger element
+	*/
 	triggerClassName: PropTypes.string
 };
 //#endregion

package/es/components/Tooltip/Tooltip.js

@@ -159,6 +159,9 @@ const Tooltip = React.forwardRef(({ as, align = "top", className: customClassNam
 	});
 });
 Tooltip.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -181,15 +184,58 @@ Tooltip.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* Pass in the child to which the tooltip will be applied
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+	*/
 	closeOnActivation: PropTypes.bool,
+	/**
+	* Specify whether the tooltip should be open when it first renders
+	*/
 	defaultOpen: PropTypes.bool,
+	/**
+	* Provide the description to be rendered inside of the Tooltip. The
+	* description will use `aria-describedby` and will describe the child node
+	* in addition to the text rendered inside of the child. This means that if you
+	* have text in the child node, that it will be announced alongside the
+	* description to the screen reader.
+	*
+	* Note: if label and description are both provided, label will be used and
+	* description will not be used
+	*/
 	description: PropTypes.node,
+	/**
+	* Specify whether a drop shadow should be rendered
+	*/
 	dropShadow: PropTypes.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip
+	*/
 	enterDelayMs: PropTypes.number,
+	/**
+	* Render the component using the high-contrast theme
+	*/
 	highContrast: PropTypes.bool,
+	/**
+	* Provide the label to be rendered inside of the Tooltip. The label will use
+	* `aria-labelledby` and will fully describe the child node that is provided.
+	* This means that if you have text in the child node, that it will not be
+	* announced to the screen reader.
+	*
+	* Note: if label and description are both provided, description will not be
+	* used
+	*/
 	label: PropTypes.node,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: PropTypes.number
 };
 //#endregion