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

package/es/components/RadioButton/RadioButton.js

@@ -85,25 +85,88 @@ const RadioButton = React.forwardRef((props, ref) => {
 });
 RadioButton.displayName = "RadioButton";
 RadioButton.propTypes = {
+	/**
+	* Specify whether the `<RadioButton>` is currently checked
+	*/
 	checked: PropTypes.bool,
+	/**
+	* Provide an optional className to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify whether the `<RadioButton>` should be checked by default
+	*/
 	defaultChecked: PropTypes.bool,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Provide a unique id for the underlying `<input>` node
+	*/
 	id: PropTypes.string,
+	/**
+	* Provide where label text should be placed
+	* NOTE: `top`/`bottom` are deprecated
+	*/
 	labelPosition: PropTypes.oneOf(["right", "left"]),
+	/**
+	* Provide label text to be read by screen readers when interacting with the
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* Provide a name for the underlying `<input>` node
+	*/
 	name: PropTypes.string,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide a handler that is invoked when a user clicks on the control
+	*/
 	onClick: PropTypes.func,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* 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,
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in warning state
+	*/
 	warnText: PropTypes.node,
+	/**
+	* Specify whether the RadioButton should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Specify the value of the `<RadioButton>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 //#endregion

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -114,24 +114,83 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 	});
 });
 RadioButtonGroup.propTypes = {
+	/**
+	* Provide a collection of `<RadioButton>` components to render in the group
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify the `<RadioButton>` to be selected by default
+	*/
 	defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the group is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: PropTypes.node,
+	/**
+	* 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 where label text should be placed
+	*/
 	labelPosition: PropTypes.oneOf(["left", "right"]),
+	/**
+	* Provide a legend to the RadioButtonGroup input that you are
+	* exposing to the user
+	*/
 	legendText: PropTypes.node,
+	/**
+	* 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,
+	/**
+	* Provide where radio buttons should be placed
+	*/
 	orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+	/**
+	* Whether the RadioButtonGroup should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* `true` to specify if radio selection in group is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Specify the value that is currently selected in the group
+	*/
 	valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in warning state
+	*/
 	warnText: PropTypes.node
 };
 RadioButtonGroup.displayName = "RadioButtonGroup";

package/es/components/RadioTile/RadioTile.js

@@ -94,19 +94,64 @@ const RadioTile = React.forwardRef(({ children, className: customClassName, deco
 });
 RadioTile.displayName = "RadioTile";
 RadioTile.propTypes = {
+	/**
+	* Specify whether the `RadioTile` should be checked.
+	*/
 	checked: PropTypes.bool,
+	/**
+	* The `RadioTile` content.
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional `className` to be applied to the underlying `<label>`.
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify whether the `RadioTile` should be disabled.
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify if the `ExpandableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: PropTypes.bool,
+	/**
+	* Provide a unique id for the underlying `<input>`.
+	*/
 	id: PropTypes.string,
+	/**
+	* `true` to use the light version. For use on `$layer-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 `RadioTile` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Provide a `name` for the underlying `<input>`.
+	*/
 	name: PropTypes.string,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `RadioTile` 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 underlying `<input>`.
+	*/
 	tabIndex: PropTypes.number,
+	/**
+	* Specify the value of the underlying `<input>`.
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 //#endregion

package/es/components/Search/Search.Skeleton.js

@@ -32,13 +32,22 @@ const SearchSkeleton = ({ small = false, size, className, ...rest }) => {
 	});
 };
 SearchSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the size of the SearchSkeleton
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify whether the Search should be a small variant
+	*/
 	small: deprecate(PropTypes.bool, "The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.")
 };
 //#endregion

package/es/components/Search/Search.js

@@ -155,29 +155,90 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 });
 Search$1.displayName = "Search";
 Search$1.propTypes = {
+	/**
+	* Specify an optional value for the `autocomplete` property on the underlying
+	* `<input>`, defaults to "off"
+	*/
 	autoComplete: PropTypes.string,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify a label to be read by screen readers on the "close" button
+	*/
 	closeButtonLabelText: PropTypes.string,
+	/**
+	* Optionally provide the default value of the `<input>`
+	*/
 	defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the input
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether or not ExpandableSearch should render expanded or not
+	*/
 	isExpanded: PropTypes.bool,
+	/**
+	* Provide the label text for the Search icon
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* Specify light version or default version of this control
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `Search` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release."),
+	/**
+	* Optional callback called when the search value changes.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: PropTypes.func,
+	/**
+	* Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+	*/
 	onExpand: PropTypes.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the input
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* Provide an optional placeholder text for the Search.
+	* Note: if the label and placeholder differ,
+	* VoiceOver on Mac will read both
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Deprecated, since <input type="search"> already provides correct semantics.
+	* Specify the role for the underlying `<input>`, defaults to `searchbox`
+	*/
 	role: deprecate(PropTypes.string, "The `role` prop has been deprecated since <input type=\"search\"> already provides correct semantics. It will be removed in the next major release of Carbon."),
+	/**
+	* Specify the size of the Search
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify the type of the `<input>`
+	*/
 	type: PropTypes.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 function CustomSearchIcon({ icon: Icon }) {
@@ -185,6 +246,10 @@ function CustomSearchIcon({ icon: Icon }) {
 	if (Icon) return /* @__PURE__ */ jsx(Icon, { className: `${prefix}--search-magnifier-icon` });
 	return /* @__PURE__ */ jsx(Search, { className: `${prefix}--search-magnifier-icon` });
 }
-CustomSearchIcon.propTypes = { icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) };
+CustomSearchIcon.propTypes = { 
+/**
+* Rendered icon for the Search. Can be a React component class
+*/
+icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) };
 //#endregion
 export { Search$1 as default };

package/es/components/Select/Select.Skeleton.js

@@ -29,7 +29,13 @@ const SelectSkeleton = ({ hideLabel, className, ...rest }) => {
 	});
 };
 SelectSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add to the form item wrapper.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: PropTypes.bool
 };
 //#endregion

package/es/components/Select/Select.js

@@ -98,25 +98,27 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 	};
 	const candidate = slug ?? decorator;
 	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "mini" }) : candidate;
-	const input = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("select", {
-			...other,
-			...ariaProps,
-			id,
-			className: inputClasses,
-			disabled: normalizedProps.disabled || void 0,
-			"aria-invalid": normalizedProps.invalid || void 0,
-			"aria-readonly": readOnly || void 0,
-			title,
-			onChange: composeEventHandlers([onChange, handleChange]),
-			...readOnlyEventHandlers,
-			ref,
-			children
-		}),
-		/* @__PURE__ */ jsx(ChevronDown, { className: `${prefix}--select__arrow` }),
-		normalizedProps.invalid && /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--select__invalid-icon` }),
-		!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
-	] });
+	const input = (() => {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("select", {
+				...other,
+				...ariaProps,
+				id,
+				className: inputClasses,
+				disabled: normalizedProps.disabled || void 0,
+				"aria-invalid": normalizedProps.invalid || void 0,
+				"aria-readonly": readOnly || void 0,
+				title,
+				onChange: composeEventHandlers([onChange, handleChange]),
+				...readOnlyEventHandlers,
+				ref,
+				children
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: `${prefix}--select__arrow` }),
+			normalizedProps.invalid && /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--select__invalid-icon` }),
+			!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
+		] });
+	})();
 	return /* @__PURE__ */ jsx("div", {
 		className: classNames(`${prefix}--form-item`, className),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -158,22 +160,77 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 });
 Select.displayName = "Select";
 Select.propTypes = {
+	/**
+	* Provide the contents of your Select
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the node containing the label and the select box
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `Select` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Optionally provide the default value of the `<select>`
+	*/
 	defaultValue: PropTypes.any,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: PropTypes.node,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<select>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify whether you want the inline version of this control
+	*/
 	inline: PropTypes.bool,
+	/**
+	* Specify if the currently value is invalid.
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Message which is displayed if the value is invalid.
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide label text to be read by screen readers when interacting with the
+	* control
+	*/
 	labelText: PropTypes.node,
+	/**
+	* `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 `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release."),
+	/**
+	* Reserved for use with Pagination component. Will not render a label for the
+	* select since Pagination renders one for us.
+	*/
 	noLabel: PropTypes.bool,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Whether the select should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the size of the Select Input.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
@@ -181,7 +238,13 @@ Select.propTypes = {
 		"lg"
 	]),
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in warning state
+	*/
 	warnText: PropTypes.node
 };
 //#endregion

package/es/components/SelectItem/SelectItem.js

@@ -32,10 +32,25 @@ const SelectItem = ({ className, value = "", disabled = false, hidden = false, t
 	});
 };
 SelectItem.propTypes = {
+	/**
+	* Specify an optional className to be applied to the node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the <SelectItem> should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the <SelectItem> is hidden
+	*/
 	hidden: PropTypes.bool,
+	/**
+	* Provide the contents of your <SelectItem>
+	*/
 	text: PropTypes.string.isRequired,
+	/**
+	* Specify the value of the <SelectItem>
+	*/
 	value: PropTypes.any.isRequired
 };
 //#endregion

package/es/components/SelectItemGroup/SelectItemGroup.js

@@ -27,9 +27,21 @@ const SelectItemGroup = ({ children, className, disabled = false, label, ...othe
 	});
 };
 SelectItemGroup.propTypes = {
+	/**
+	* Provide the contents of your <SelectItemGroup>
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the <SelectItemGroup> should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify the label to be displayed
+	*/
 	label: PropTypes.string.isRequired
 };
 //#endregion

package/es/components/ShapeIndicator/index.js

@@ -76,9 +76,21 @@ const ShapeIndicator = React.forwardRef(({ className: customClassName, kind, lab
 	});
 });
 ShapeIndicator.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the kind of the Shape Indicator
+	*/
 	kind: PropTypes.oneOf(ShapeIndicatorKinds).isRequired,
+	/**
+	* Label next to the shape.
+	*/
 	label: PropTypes.string.isRequired,
+	/**
+	* Specify the text size of the Shape Indicator. Defaults to 12.
+	*/
 	textSize: PropTypes.oneOf([12, 14])
 };
 //#endregion

package/es/components/SkeletonIcon/SkeletonIcon.js

@@ -23,6 +23,10 @@ const SkeletonIcon = ({ className, ...other }) => {
 		...other
 	});
 };
-SkeletonIcon.propTypes = { className: PropTypes.string };
+SkeletonIcon.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: PropTypes.string };
 //#endregion
 export { SkeletonIcon as default };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -17,6 +17,10 @@ const SkeletonPlaceholder = ({ className, ...other }) => {
 		...other
 	});
 };
-SkeletonPlaceholder.propTypes = { className: PropTypes.string };
+SkeletonPlaceholder.propTypes = { 
+/**
+* Add a custom class to the component to set the height and width
+*/
+className: PropTypes.string };
 //#endregion
 export { SkeletonPlaceholder as default };

package/es/components/SkeletonText/SkeletonText.js

@@ -68,10 +68,25 @@ const SkeletonText = ({ paragraph = false, lineCount = 3, width = "100%", headin
 	return /* @__PURE__ */ jsx(Fragment, { children: lines });
 };
 SkeletonText.propTypes = {
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* generates skeleton text at a larger size
+	*/
 	heading: PropTypes.bool,
+	/**
+	* the number of lines shown if paragraph is true
+	*/
 	lineCount: PropTypes.number,
+	/**
+	* will generate multiple lines of text
+	*/
 	paragraph: PropTypes.bool,
+	/**
+	* width (in px or %) of single line of text or max-width of paragraph lines
+	*/
 	width: PropTypes.string
 };
 //#endregion

package/es/components/Slider/Slider.Skeleton.js

@@ -67,10 +67,25 @@ const SliderSkeleton = ({ ariaLabel = "slider handle", unstable_ariaLabelHandleU
 	});
 };
 SliderSkeleton.propTypes = {
+	/**
+	* The `ariaLabel` for the handle icon.
+	*/
 	ariaLabel: PropTypes.string,
+	/**
+	* The `ariaLabel` for the upper bound slider handle when there are two handles.
+	*/
 	unstable_ariaLabelHandleUpper: PropTypes.string,
+	/**
+	* Specify an optional className to add to the form item wrapper.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Turn the slider into a range slider.
+	*/
 	twoHandles: PropTypes.bool
 };
 //#endregion