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

package/lib/components/Tile/Tile.js

@@ -59,11 +59,33 @@ const Tile = react.default.forwardRef(({ children, className, decorator, light =
 });
 Tile.displayName = "Tile";
 Tile.propTypes = {
+	/**
+	* The child nodes.
+	*/
 	children: prop_types.default.node,
+	/**
+	* The CSS class names.
+	*/
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
+	* when an AILabel is present
+	*/
 	hasRoundedCorners: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: require_deprecate.deprecate(prop_types.default.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.default.forwardRef(({ children, className, clicked = false, decorator, disabled, href, light, onClick = () => {}, onKeyDown = () => {}, renderIcon: Icon, hasRoundedCorners, slug, ...rest }, ref) => {
@@ -128,17 +150,55 @@ const ClickableTile = react.default.forwardRef(({ children, className, clicked =
 });
 ClickableTile.displayName = "ClickableTile";
 ClickableTile.propTypes = {
+	/**
+	* The child nodes.
+	*/
 	children: prop_types.default.node,
+	/**
+	* The CSS class names.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Boolean for whether a tile has been clicked.
+	*/
 	clicked: prop_types.default.bool,
+	/**
+	* **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+	*/
 	decorator: prop_types.default.oneOfType([prop_types.default.bool, prop_types.default.node]),
+	/**
+	* Specify whether the ClickableTile should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: prop_types.default.bool,
+	/**
+	* The href for the link.
+	*/
 	href: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: prop_types.default.func,
+	/**
+	* Specify the function to run when the ClickableTile is interacted with via a keyboard
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* The rel property for the link.
+	*/
 	rel: prop_types.default.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
 };
 const SelectableTile = react.default.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title = "title", slug, hasRoundedCorners, ...rest }, ref) => {
@@ -215,19 +275,65 @@ const SelectableTile = react.default.forwardRef(({ children, className, decorato
 SelectableTile.propTypes = {
 	children: prop_types.default.node,
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Specify whether the SelectableTile should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: prop_types.default.bool,
+	/**
+	* The ID of the `<input>`.
+	*/
 	id: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: require_deprecate.deprecate(prop_types.default.string, "The `name` property is no longer used.  It will be removed in the next major release."),
+	/**
+	* The empty handler of the `<input>`.
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Specify the function to run when the SelectableTile is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Specify the function to run when the SelectableTile is interacted with via a keyboard
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* `true` to select this tile.
+	*/
 	selected: prop_types.default.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+	*/
 	slug: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number,
+	/**
+	* The `title` of the `<input>`.
+	*/
 	title: prop_types.default.string,
+	/**
+	* The value of the `<input>`.
+	* @deprecated
+	*/
 	value: require_deprecate.deprecate(prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]), "The `value` property is no longer used.  It will be removed in the next major release.`")
 };
 const ExpandableTile = (0, react.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) => {
@@ -378,18 +484,59 @@ const ExpandableTile = (0, react.forwardRef)(({ tabIndex = 0, className, childre
 ExpandableTile.propTypes = {
 	children: prop_types.default.node,
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* `true` if the tile is expanded.
+	*/
 	expanded: prop_types.default.bool,
+	/**
+	* Specify if the `ExpandableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: prop_types.default.bool,
+	/**
+	* An ID that can be provided to aria-labelledby
+	*/
 	id: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: prop_types.default.func,
+	/**
+	* optional handler to trigger a function when a key is pressed
+	*/
 	onKeyUp: prop_types.default.func,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+	*/
 	slug: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number,
+	/**
+	* The description of the "collapsed" icon that can be read by screen readers.
+	*/
 	tileCollapsedIconText: prop_types.default.string,
+	/**
+	* When "collapsed", a label to appear next to the chevron (e.g., "View more").
+	*/
 	tileCollapsedLabel: prop_types.default.string,
+	/**
+	* The description of the "expanded" icon that can be read by screen readers.
+	*/
 	tileExpandedIconText: prop_types.default.string,
+	/**
+	* When "expanded", a label to appear next to the chevron (e.g., "View less").
+	*/
 	tileExpandedLabel: prop_types.default.string
 };
 ExpandableTile.displayName = "ExpandableTile";
@@ -400,7 +547,11 @@ const TileAboveTheFoldContent = react.default.forwardRef(({ children }, ref) =>
 		children
 	});
 });
-TileAboveTheFoldContent.propTypes = { children: prop_types.default.node };
+TileAboveTheFoldContent.propTypes = { 
+/**
+* The child nodes.
+*/
+children: prop_types.default.node };
 TileAboveTheFoldContent.displayName = "TileAboveTheFoldContent";
 const TileBelowTheFoldContent = react.default.forwardRef(({ children }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -409,7 +560,11 @@ const TileBelowTheFoldContent = react.default.forwardRef(({ children }, ref) =>
 		children
 	});
 });
-TileBelowTheFoldContent.propTypes = { children: prop_types.default.node };
+TileBelowTheFoldContent.propTypes = { 
+/**
+* The child nodes.
+*/
+children: prop_types.default.node };
 TileBelowTheFoldContent.displayName = "TileBelowTheFoldContent";
 //#endregion
 exports.ClickableTile = ClickableTile;

package/lib/components/TileGroup/TileGroup.js

@@ -68,14 +68,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: prop_types.default.node,
+	/**
+	* Provide an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the the value of <RadioTile> to be selected by default
+	*/
 	defaultSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* Specify whether the group is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide an optional legend for this group
+	*/
 	legend: prop_types.default.string,
+	/**
+	* Specify the name of the underlying `<input>` nodes
+	*/
 	name: prop_types.default.string.isRequired,
+	/**
+	* Provide an optional `onChange` hook that is called whenever the value of
+	* the group changes
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* `true` to specify if input selection in group is required.
+	*/
 	required: prop_types.default.bool,
+	/**
+	* Specify the value that is currently selected in the group
+	*/
 	valueSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number])
 };
 //#endregion

package/lib/components/TimePicker/TimePicker.js

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

package/lib/components/TimePickerSelect/TimePickerSelect.js

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

package/lib/components/Toggle/Toggle.js

@@ -96,19 +96,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": prop_types.default.string,
+	/**
+	* Specify a custom className to apply to the form-item node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the toggle should be on by default
+	*/
 	defaultToggled: prop_types.default.bool,
+	/**
+	* Whether this control should be disabled
+	*/
 	disabled: prop_types.default.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: prop_types.default.bool,
+	/**
+	* Provide an id that unique represents the underlying `<button>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify the label for the "off" position
+	*/
 	labelA: prop_types.default.node,
+	/**
+	* Specify the label for the "on" position
+	*/
 	labelB: prop_types.default.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: prop_types.default.string,
+	/**
+	* Provide an event listener that is called when the control is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide an event listener that is called when the control is toggled
+	*/
 	onToggle: prop_types.default.func,
+	/**
+	* Whether the toggle should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+	*/
 	size: prop_types.default.oneOf(["sm", "md"]),
+	/**
+	* Specify whether the control is toggled
+	*/
 	toggled: prop_types.default.bool
 };
 //#endregion

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -51,8 +51,19 @@ const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
 };
 ToggleSmallSkeleton.propTypes = {
 	["aria-label"]: prop_types.default.string.isRequired,
+	/**
+	* Specify an optional className to add to the form item wrapper.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide an id that unique represents the underlying `<input>`
+	*/
 	id: prop_types.default.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: prop_types.default.string
 };
 //#endregion

package/lib/components/Toggletip/index.js

@@ -37,8 +37,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: prop_types.default.elementType,
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string
 };
 const ToggletipContext = react.default.createContext(void 0);
@@ -130,6 +141,9 @@ function Toggletip({ align, as, autoAlign, className: customClassName, children,
 const { open, ...popoverNonOpenPropTypes } = require_index.Popover.propTypes ?? {};
 Toggletip.propTypes = {
 	...popoverNonOpenPropTypes,
+	/**
+	* Specify if the toggletip should be open by default
+	*/
 	defaultOpen: prop_types.default.bool
 };
 /**
@@ -157,8 +171,18 @@ const ToggletipButton = (0, react.forwardRef)(function ToggletipButton({ childre
 	});
 });
 ToggletipButton.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide an accessible label for this button
+	*/
 	label: prop_types.default.string
 };
 ToggletipButton.displayName = "ToggletipButton";
@@ -182,7 +206,14 @@ const ToggletipContent = (0, react.forwardRef)((props, ref) => {
 	});
 });
 ToggletipContent.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string
 };
 ToggletipContent.displayName = "ToggletipContent";
@@ -197,7 +228,14 @@ function ToggletipActions({ children, className: customClassName }) {
 	});
 }
 ToggletipActions.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string
 };
 //#endregion

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -75,6 +75,9 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 	});
 };
 DefinitionTooltip.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -97,14 +100,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: prop_types.default.bool,
+	/**
+	* The `children` prop will be used as the value that is being defined
+	*/
 	children: prop_types.default.node.isRequired,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the tooltip should be open when it first renders
+	*/
 	defaultOpen: prop_types.default.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: prop_types.default.node.isRequired,
+	/**
+	* Provide a value that will be assigned as the id of the tooltip
+	*/
 	id: prop_types.default.string,
+	/**
+	* Specifies whether or not the `DefinitionTooltip` should open on hover or not
+	*/
 	openOnHover: prop_types.default.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: require_deprecate.deprecate(prop_types.default.node, "The tooltipText prop has been deprecated. Please use the `definition` prop instead."),
+	/**
+	* The CSS class name of the trigger element
+	*/
 	triggerClassName: prop_types.default.string
 };
 //#endregion