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

package/es/components/FormGroup/FormGroup.js

@@ -41,13 +41,38 @@ const FormGroup = ({ disabled = false, legendId, legendText, invalid = false, ch
 	});
 };
 FormGroup.propTypes = {
+	/**
+	* Provide the children form elements to be rendered inside of the <fieldset>
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied to the containing <fieldset> node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the FormGroup should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the <FormGroup> is invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide id for the fieldset <legend> which corresponds to the fieldset
+	* `aria-labelledby`
+	*/
 	legendId: PropTypes.node,
+	/**
+	* Provide the text to be rendered inside of the fieldset <legend>
+	*/
 	legendText: PropTypes.node.isRequired,
+	/**
+	* Specify whether the message should be displayed in the <FormGroup>
+	*/
 	message: PropTypes.bool,
+	/**
+	* Provide the text for the message in the <FormGroup>
+	*/
 	messageText: PropTypes.string
 };
 //#endregion

package/es/components/FormItem/FormItem.js

@@ -25,7 +25,13 @@ function FormItem({ className, children, ...rest }) {
 	});
 }
 FormItem.propTypes = {
+	/**
+	* Provide content to be rendered in the form item
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied to the containing node
+	*/
 	className: PropTypes.string
 };
 //#endregion

package/es/components/FormLabel/FormLabel.js

@@ -29,8 +29,17 @@ function FormLabel({ className: customClassName, children, id, ...rest }) {
 	});
 }
 FormLabel.propTypes = {
+	/**
+	* Specify the content of the form label
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied to the containing <label> node
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide a unique id for the given <FormLabel>
+	*/
 	id: PropTypes.string
 };
 //#endregion

package/es/components/Grid/CSSGrid.js

@@ -58,17 +58,44 @@ const CSSGrid = React.forwardRef(({ align, as, children, className: customClassN
 	});
 });
 CSSGrid.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Specify grid alignment. Default is center
+	*/
 	align: PropTypes.oneOf([
 		"start",
 		"center",
 		"end"
 	]),
+	/**
+	* Pass in content that will be rendered within the `Grid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Grid`
+	*/
 	className: PropTypes.string,
+	/**
+	* Collapse the gutter to 1px. Useful for fluid layouts.
+	* Rows have 1px of margin between them to match gutter.
+	*/
 	condensed: PropTypes.bool,
+	/**
+	* Remove the default max width that the grid has set
+	*/
 	fullWidth: PropTypes.bool,
+	/**
+	* Container hangs 16px into the gutter. Useful for
+	* typographic alignment with and without containers.
+	*/
 	narrow: PropTypes.bool,
+	/**
+	* Add a row gap to the grid that matches the current gutter size.
+	* This is useful when you want consistent vertical spacing between rows.
+	*/
 	withRowGap: PropTypes.bool
 };
 const Subgrid = React.forwardRef(({ as, className: customClassName, children, mode, withRowGap, ...rest }, ref) => {
@@ -88,14 +115,30 @@ const Subgrid = React.forwardRef(({ as, className: customClassName, children, mo
 	});
 });
 Subgrid.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Subgrid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Subgrid`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the gutter mode for the subgrid
+	*/
 	mode: PropTypes.oneOf([
 		"wide",
 		"narrow",
 		"condensed"
 	]),
+	/**
+	* Add a row gap to the grid that matches the current gutter size.
+	* This is useful when you want consistent vertical spacing between rows.
+	*/
 	withRowGap: PropTypes.bool
 };
 const CSSGridComponent = CSSGrid;

package/es/components/Grid/Column.js

@@ -74,14 +74,57 @@ const spanPropType = enabled("enable-css-grid") ? PropTypes.oneOfType([
 	})
 ]);
 Column.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Column`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Column`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+	* This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	lg: spanPropType,
+	/**
+	* Specify column span for the `max` breakpoint. This breakpoint supports 16
+	* columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	max: spanPropType,
+	/**
+	* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+	* This breakpoint supports 8 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	md: spanPropType,
+	/**
+	* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+	* This breakpoint supports 4 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	sm: spanPropType,
+	/**
+	* Specify constant column span, start, or end values that will not change
+	* based on breakpoint
+	*/
 	span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
+	/**
+	* Specify column span for the `xlg` breakpoint (Default breakpoint up to
+	* 1584px) This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	xlg: spanPropType
 };
 const CSSGridColumn = React.forwardRef(({ as: BaseComponent = "div", children, className: containerClassName, sm, md, lg, xlg, max, span, ...rest }, ref) => {
@@ -100,13 +143,50 @@ const CSSGridColumn = React.forwardRef(({ as: BaseComponent = "div", children, c
 	});
 });
 CSSGridColumn.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Column`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Column`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+	* This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	lg: spanPropType,
+	/**
+	* Specify column span for the `max` breakpoint. This breakpoint supports 16
+	* columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	max: spanPropType,
+	/**
+	* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+	* This breakpoint supports 8 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	md: spanPropType,
+	/**
+	* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+	* This breakpoint supports 4 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	sm: spanPropType,
+	/**
+	* Specify constant column span, start,  or end values that will not change
+	* based on breakpoint
+	*/
 	span: PropTypes.oneOfType([
 		PropTypes.number,
 		percentSpanType,
@@ -116,6 +196,12 @@ CSSGridColumn.propTypes = {
 			end: PropTypes.number
 		})
 	]),
+	/**
+	* Specify column span for the `xlg` breakpoint (Default breakpoint up to
+	* 1584px) This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	xlg: spanPropType
 };
 const breakpointNames = [

package/es/components/Grid/ColumnHang.js

@@ -30,8 +30,17 @@ function ColumnHang({ as: BaseComponent = "div", className: customClassName, chi
 	});
 }
 ColumnHang.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Grid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Grid`
+	*/
 	className: PropTypes.string
 };
 const ColumnHangComponent = ColumnHang;

package/es/components/Grid/FlexGrid.js

@@ -39,12 +39,36 @@ const FlexGrid = React.forwardRef(({ as, condensed = false, narrow = false, full
 	});
 });
 FlexGrid.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `FlexGrid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `FlexGrid`
+	*/
 	className: PropTypes.string,
+	/**
+	* Collapse the gutter to 1px. Useful for fluid layouts.
+	* Rows have 1px of margin between them to match gutter.
+	*/
 	condensed: PropTypes.bool,
+	/**
+	* Remove the default max width that the grid has set
+	*/
 	fullWidth: PropTypes.bool,
+	/**
+	* Container hangs 16px into the gutter. Useful for
+	* typographic alignment with and without containers.
+	*/
 	narrow: PropTypes.bool,
+	/**
+	* Add a row gap to the grid that matches the current gutter size.
+	* This is useful when you want consistent vertical spacing between rows.
+	*/
 	withRowGap: PropTypes.bool
 };
 const FlexGridComponent = FlexGrid;

package/es/components/Grid/Grid.js

@@ -23,17 +23,44 @@ function Grid(props) {
 	return /* @__PURE__ */ jsx(FlexGridComponent, { ...props });
 }
 Grid.propTypes = {
+	/**
+	* Specify grid alignment. Default is center
+	*/
 	align: PropTypes.oneOf([
 		"start",
 		"center",
 		"end"
 	]),
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Grid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Grid`
+	*/
 	className: PropTypes.string,
+	/**
+	* Collapse the gutter to 1px. Useful for fluid layouts.
+	* Rows have 1px of margin between them to match gutter.
+	*/
 	condensed: PropTypes.bool,
+	/**
+	* Remove the default max width that the grid has set
+	*/
 	fullWidth: PropTypes.bool,
+	/**
+	* Container hangs 16px into the gutter. Useful for
+	* typographic alignment with and without containers.
+	*/
 	narrow: PropTypes.bool,
+	/**
+	* Add a row gap to the grid that matches the current gutter size.
+	* This is useful when you want consistent vertical spacing between rows.
+	*/
 	withRowGap: PropTypes.bool
 };
 const GridAsGridComponent = Grid;

package/es/components/Grid/GridContext.js

@@ -36,8 +36,18 @@ const GridSettings = ({ children, mode, subgrid = false }) => {
 	});
 };
 GridSettings.propTypes = {
+	/**
+	* Pass in components which will be rendered within the `GridSettings`
+	* component
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify the gutter mode for the GridContext
+	*/
 	mode: PropTypes.oneOf(["flexbox", "css-grid"]).isRequired,
+	/**
+	* Specify whether subgrid should be enabled
+	*/
 	subgrid: PropTypes.bool
 };
 /**

package/es/components/Grid/Row.js

@@ -30,10 +30,27 @@ function Row({ as: BaseComponent = "div", condensed = false, narrow = false, cla
 	});
 }
 Row.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Row`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Row`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify a single row as condensed.Rows that are adjacent
+	* and are condensed will have 2px of margin between them to match gutter.
+	*/
 	condensed: PropTypes.bool,
+	/**
+	* Specify a single row as narrow. The container will hang
+	* 16px into the gutter.
+	*/
 	narrow: PropTypes.bool
 };
 //#endregion

package/es/components/Heading/index.js

@@ -29,9 +29,22 @@ const Section = React.forwardRef(function Section({ as: BaseComponent = "section
 	});
 });
 Section.propTypes = {
+	/**
+	* Provide an alternative tag or component to use instead of the default
+	* <section> element
+	*/
 	as: PropTypes.elementType,
+	/**
+	* Specify the content that will be placed in the component
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a class name for the outermost node of the component
+	*/
 	className: PropTypes.string,
+	/**
+	* Overrides the level of the section
+	*/
 	level: PropTypes.number
 };
 const Heading = React.forwardRef((props, ref) => {
@@ -41,7 +54,13 @@ const Heading = React.forwardRef((props, ref) => {
 	});
 });
 Heading.propTypes = {
+	/**
+	* Specify the content that will be placed in the component
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a class name for the outermost node of the component
+	*/
 	className: PropTypes.string
 };
 //#endregion

package/es/components/Icon/Icon.Skeleton.js

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

package/es/components/IconButton/index.js

@@ -63,6 +63,9 @@ const IconButton = forwardRef(({ align, autoAlign = false, badgeCount, children,
 	});
 });
 IconButton.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: deprecateValuesWithin(PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -98,28 +101,93 @@ IconButton.propTypes = {
 		"right-start",
 		"right-end"
 	], mapPopoverAlign),
+	/**
+	* **Experimental**: Will attempt to automatically align the tooltip. Requires
+	* React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: PropTypes.bool,
+	/**
+	* **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+	* Must be used with size="lg", kind="ghost" and hasIconOnly=true
+	*/
 	badgeCount: PropTypes.number,
+	/**
+	* Optionally specify an href for your IconButton to become an `<a>` element
+	*/
 	href: PropTypes.string,
+	/**
+	* Provide an icon or asset to be rendered inside of the IconButton
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your Button
+	*/
 	className: PropTypes.string,
+	/**
+	* Determines whether 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,
+	/**
+	* Specify whether a drop shadow should be rendered on the tooltip
+	*/
 	dropShadow: PropTypes.bool,
+	/**
+	* Specify whether the Button should be disabled, or not
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip
+	*/
 	enterDelayMs: PropTypes.number,
+	/**
+	* Specify whether the IconButton is currently selected
+	*/
 	isSelected: PropTypes.bool,
+	/**
+	* Render the tooltip using the high-contrast theme
+	*/
 	highContrast: PropTypes.bool,
+	/**
+	* Specify the type of button to be used as the base for the IconButton
+	*/
 	kind: PropTypes.oneOf(IconButtonKinds),
+	/**
+	* 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 it will not be
+	* announced to the screen reader.
+	* If using `badgeCount={0}`, make sure the label explains that there is a
+	* new notification.
+	*/
 	label: PropTypes.node.isRequired,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: PropTypes.number,
+	/**
+	* Optionally specify a `rel` when using an `<a>` element.
+	*/
 	rel: PropTypes.string,
+	/**
+	* Specify the size of the Button.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Optionally specify a `target` when using an `<a>` element.
+	*/
 	target: PropTypes.string,
+	/**
+	* Specify an optional className to be added to your Tooltip wrapper
+	*/
 	wrapperClasses: PropTypes.string
 };
 //#endregion

package/es/components/IconIndicator/index.js

@@ -61,9 +61,21 @@ const IconIndicator = React.forwardRef(({ className: customClassName, kind, labe
 	});
 });
 IconIndicator.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the kind of the Icon Indicator
+	*/
 	kind: PropTypes.oneOf(IconIndicatorKinds).isRequired,
+	/**
+	* Label next to the icon.
+	*/
 	label: PropTypes.string.isRequired,
+	/**
+	* Specify the size of the Icon Indicator. Defaults to 16.
+	*/
 	size: PropTypes.oneOf([16, 20])
 };
 //#endregion

package/es/components/IdPrefix/index.js

@@ -24,6 +24,9 @@ function IdPrefix({ children, prefix }) {
 }
 IdPrefix.propTypes = {
 	children: PropTypes.node,
+	/**
+	* The value used to prefix the auto-generated id placed on some DOM elements
+	*/
 	prefix: PropTypes.string
 };
 //#endregion

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -62,16 +62,50 @@ const InlineCheckbox = React.forwardRef((props, forwardRef) => {
 	});
 });
 InlineCheckbox.propTypes = {
+	/**
+	* Specify the label for the control
+	*/
 	["aria-label"]: PropTypes.string.isRequired,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the label for the control
+	*/
 	ariaLabel: deprecate(PropTypes.string.isRequired, "The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release."),
+	/**
+	* Specify whether the underlying control is checked, or not
+	*/
 	checked: PropTypes.bool,
+	/**
+	* Specify whether the underlying input control should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide an `id` for the underlying input control
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify whether the control is in an indeterminate state
+	*/
 	indeterminate: PropTypes.bool,
+	/**
+	* Provide a `name` for the underlying input control
+	*/
 	name: PropTypes.string.isRequired,
+	/**
+	* Provide an optional hook that is called each time the input is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide a handler that is invoked when a user clicks on the control
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the control
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* Provide an optional tooltip for the InlineCheckbox
+	*/
 	title: PropTypes.string
 };
 //#endregion

package/es/components/InlineLoading/InlineLoading.js

@@ -76,16 +76,35 @@ const InlineLoading = ({ className, status = "active", iconDescription, descript
 	});
 };
 InlineLoading.propTypes = {
+	/**
+	* Specify a custom className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the description for the inline loading text
+	*/
 	description: PropTypes.node,
+	/**
+	* Specify the description for the inline loading text
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Provide an optional handler to be invoked when <InlineLoading> is
+	* successful
+	*/
 	onSuccess: PropTypes.func,
+	/**
+	* Specify the loading status
+	*/
 	status: PropTypes.oneOf([
 		"inactive",
 		"active",
 		"finished",
 		"error"
 	]),
+	/**
+	* Provide a delay for the `setTimeout` for success
+	*/
 	successDelay: PropTypes.number
 };
 //#endregion