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

package/lib/components/Popover/index.js

@@ -258,6 +258,9 @@ const Popover = react.default.forwardRef(function PopoverRenderFunction({ isTabT
 });
 if (process.env.NODE_ENV !== "production") Popover.displayName = "Popover";
 Popover.propTypes = {
+	/**
+	* Specify how the popover should align with the trigger element
+	*/
 	align: require_deprecateValuesWithin.deprecateValuesWithin(prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -293,10 +296,29 @@ Popover.propTypes = {
 		"right-start",
 		"right-end"
 	], require_mapPopoverAlign.mapPopoverAlign),
+	/**
+	* **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
+	*/
 	alignmentAxisOffset: prop_types.default.number,
+	/**
+	* Provide a custom element or component to render the top-level node for the
+	* component.
+	*/
 	as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
+	/**
+	* Will auto-align the popover on first render if it is not visible. 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,
+	/**
+	* Specify the background token to use. Default is 'layer'.
+	*/
 	backgroundToken: prop_types.default.oneOf(["layer", "background"]),
+	/**
+	* Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+	*/
 	autoAlignBoundary: prop_types.default.oneOfType([
 		prop_types.default.oneOf(["clippingAncestors"]),
 		prop_types.default.elementType,
@@ -308,14 +330,43 @@ Popover.propTypes = {
 			height: prop_types.default.number.isRequired
 		})
 	]),
+	/**
+	* Specify whether a caret should be rendered
+	*/
 	caret: prop_types.default.bool,
+	/**
+	* Specify whether a border should be rendered on the popover
+	*/
 	border: prop_types.default.bool,
+	/**
+	* Provide elements to be rendered inside of the component
+	*/
 	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,
+	/**
+	* Specify whether a drop shadow should be rendered on the popover
+	*/
 	dropShadow: prop_types.default.bool,
+	/**
+	* Render the component using the high-contrast variant
+	*/
 	highContrast: prop_types.default.bool,
+	/**
+	* Render the component using the tab tip variant
+	*/
 	isTabTip: prop_types.default.bool,
+	/**
+	* Specify a handler for closing popover.
+	* The handler should take care of closing the popover, e.g. changing the `open` prop.
+	*/
 	onRequestClose: prop_types.default.func,
+	/**
+	* Specify whether the component is currently open or closed
+	*/
 	open: prop_types.default.bool.isRequired
 };
 const frFn = react.forwardRef;
@@ -346,7 +397,14 @@ const PopoverContent = frFn((props, forwardRef) => {
 });
 PopoverContent.displayName = "PopoverContent";
 PopoverContent.propTypes = {
+	/**
+	* Provide elements to be rendered inside of the component
+	*/
 	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/ProgressBar/ProgressBar.js

@@ -108,22 +108,49 @@ function ProgressBar({ className, helperText, hideLabel, label, max = 100, size
 	});
 }
 ProgressBar.propTypes = {
+	/**
+	* Additional CSS class names.
+	*/
 	className: prop_types.default.string,
+	/**
+	* The current progress as a textual representation.
+	*/
 	helperText: prop_types.default.string,
+	/**
+	* Whether the label should be visually hidden.
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* A label describing the progress bar.
+	*/
 	label: prop_types.default.string.isRequired,
+	/**
+	* The maximum value.
+	*/
 	max: prop_types.default.number,
+	/**
+	* Specify the size of the ProgressBar.
+	*/
 	size: prop_types.default.oneOf(["small", "big"]),
+	/**
+	* Specify the status.
+	*/
 	status: prop_types.default.oneOf([
 		"active",
 		"finished",
 		"error"
 	]),
+	/**
+	* Defines the alignment variant of the progress bar.
+	*/
 	type: prop_types.default.oneOf([
 		"default",
 		"inline",
 		"indented"
 	]),
+	/**
+	* The current value.
+	*/
 	value: prop_types.default.number
 };
 //#endregion

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -50,7 +50,13 @@ function ProgressIndicatorSkeleton({ className, vertical, ...rest }) {
 	});
 }
 ProgressIndicatorSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Determines whether or not the ProgressIndicator should be rendered vertically.
+	*/
 	vertical: prop_types.default.bool
 };
 //#endregion

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -74,11 +74,30 @@ function ProgressIndicator({ children, className: customClassName, currentIndex:
 	});
 }
 ProgressIndicator.propTypes = {
+	/**
+	* Provide `<ProgressStep>` components to be rendered in the
+	* `<ProgressIndicator>`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide an optional className to be applied to the containing node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Optionally specify the current step array index
+	*/
 	currentIndex: prop_types.default.number,
+	/**
+	* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Specify whether the progress steps should be split equally in size in the div
+	*/
 	spaceEqually: prop_types.default.bool,
+	/**
+	* Determines whether or not the ProgressIndicator should be rendered vertically.
+	*/
 	vertical: prop_types.default.bool
 };
 function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t = defaultTranslateWithId, ...rest }) {
@@ -149,18 +168,57 @@ function ProgressStep({ label, description, className, current, complete, invali
 	});
 }
 ProgressStep.propTypes = {
+	/**
+	* Provide an optional className to be applied to the containing `<li>` node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the step has been completed
+	*/
 	complete: prop_types.default.bool,
+	/**
+	* Specify whether the step is the current step
+	*/
 	current: prop_types.default.bool,
+	/**
+	* Provide a description for the `<ProgressStep>`
+	*/
 	description: prop_types.default.string,
+	/**
+	* Specify whether the step is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Index of the current step within the ProgressIndicator
+	*/
 	index: prop_types.default.number,
+	/**
+	* Specify whether the step is invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Provide the label for the `<ProgressStep>`
+	*/
 	label: prop_types.default.node.isRequired,
+	/**
+	* A callback called if the step is clicked or the enter key is pressed
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide the props that describe a progress step tooltip
+	*/
 	overflowTooltipProps: prop_types.default.object,
+	/**
+	* Provide an optional secondary label
+	*/
 	secondaryLabel: prop_types.default.string,
+	/**
+	* The ID of the tooltip content.
+	*/
 	tooltipId: prop_types.default.string,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.func
 };
 //#endregion

package/lib/components/RadioButton/RadioButton.Skeleton.js

@@ -30,6 +30,10 @@ function RadioButtonSkeleton(props) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--radio-button ${prefix}--skeleton` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--radio-button__label ${prefix}--skeleton` })]
 	});
 }
-RadioButtonSkeleton.propTypes = { className: prop_types.default.string };
+RadioButtonSkeleton.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: prop_types.default.string };
 //#endregion
 exports.default = RadioButtonSkeleton;

package/lib/components/RadioButton/RadioButton.js

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

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -118,24 +118,83 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 	});
 });
 RadioButtonGroup.propTypes = {
+	/**
+	* Provide a collection of `<RadioButton>` 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,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Specify the `<RadioButton>` 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 text that is used alongside the control label for additional help
+	*/
 	helperText: prop_types.default.node,
+	/**
+	* 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 where label text should be placed
+	*/
 	labelPosition: prop_types.default.oneOf(["left", "right"]),
+	/**
+	* Provide a legend to the RadioButtonGroup input that you are
+	* exposing to the user
+	*/
 	legendText: prop_types.default.node,
+	/**
+	* 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,
+	/**
+	* Provide where radio buttons should be placed
+	*/
 	orientation: prop_types.default.oneOf(["horizontal", "vertical"]),
+	/**
+	* Whether the RadioButtonGroup should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* `true` to specify if radio selection in group is required.
+	*/
 	required: prop_types.default.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+	*/
 	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 value that is currently selected in the group
+	*/
 	valueSelected: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* 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
 };
 RadioButtonGroup.displayName = "RadioButtonGroup";

package/lib/components/RadioTile/RadioTile.js

@@ -98,19 +98,64 @@ const RadioTile = react.default.forwardRef(({ children, className: customClassNa
 });
 RadioTile.displayName = "RadioTile";
 RadioTile.propTypes = {
+	/**
+	* Specify whether the `RadioTile` should be checked.
+	*/
 	checked: prop_types.default.bool,
+	/**
+	* The `RadioTile` content.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide an optional `className` to be applied to the underlying `<label>`.
+	*/
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Specify whether the `RadioTile` should be disabled.
+	*/
 	disabled: 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,
+	/**
+	* Provide a unique id for the underlying `<input>`.
+	*/
 	id: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: prop_types.default.string,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes.
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: prop_types.default.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
+	*/
 	slug: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number,
+	/**
+	* Specify the value of the underlying `<input>`.
+	*/
 	value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]).isRequired
 };
 //#endregion

package/lib/components/Search/Search.Skeleton.js

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

package/lib/components/Search/Search.js

@@ -159,29 +159,90 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
 });
 Search.displayName = "Search";
 Search.propTypes = {
+	/**
+	* Specify an optional value for the `autocomplete` property on the underlying
+	* `<input>`, defaults to "off"
+	*/
 	autoComplete: prop_types.default.string,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify a label to be read by screen readers on the "close" button
+	*/
 	closeButtonLabelText: prop_types.default.string,
+	/**
+	* Optionally provide the default value of the `<input>`
+	*/
 	defaultValue: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify a custom `id` for the input
+	*/
 	id: prop_types.default.string,
+	/**
+	* Specify whether or not ExpandableSearch should render expanded or not
+	*/
 	isExpanded: prop_types.default.bool,
+	/**
+	* Provide the label text for the Search icon
+	*/
 	labelText: prop_types.default.node.isRequired,
+	/**
+	* Specify light version or default version of this control
+	*/
 	light: require_deprecate.deprecate(prop_types.default.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: prop_types.default.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: prop_types.default.func,
+	/**
+	* Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+	*/
 	onExpand: prop_types.default.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the input
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* Provide an optional placeholder text for the Search.
+	* Note: if the label and placeholder differ,
+	* VoiceOver on Mac will read both
+	*/
 	placeholder: prop_types.default.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Deprecated, since <input type="search"> already provides correct semantics.
+	* Specify the role for the underlying `<input>`, defaults to `searchbox`
+	*/
 	role: require_deprecate.deprecate(prop_types.default.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: prop_types.default.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify the type of the `<input>`
+	*/
 	type: prop_types.default.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number])
 };
 function CustomSearchIcon({ icon: Icon }) {
@@ -189,6 +250,10 @@ function CustomSearchIcon({ icon: Icon }) {
 	if (Icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: `${prefix}--search-magnifier-icon` });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Search, { className: `${prefix}--search-magnifier-icon` });
 }
-CustomSearchIcon.propTypes = { icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]) };
+CustomSearchIcon.propTypes = { 
+/**
+* Rendered icon for the Search. Can be a React component class
+*/
+icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]) };
 //#endregion
 exports.default = Search;

package/lib/components/Select/Select.Skeleton.js

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