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

package/lib/components/Grid/FlexGrid.js

@@ -43,12 +43,36 @@ const FlexGrid = react.default.forwardRef(({ as, condensed = false, narrow = fal
 	});
 });
 FlexGrid.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
+	/**
+	* Pass in content that will be rendered within the `FlexGrid`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify a custom className to be applied to the `FlexGrid`
+	*/
 	className: prop_types.default.string,
+	/**
+	* Collapse the gutter to 1px. Useful for fluid layouts.
+	* Rows have 1px of margin between them to match gutter.
+	*/
 	condensed: prop_types.default.bool,
+	/**
+	* Remove the default max width that the grid has set
+	*/
 	fullWidth: prop_types.default.bool,
+	/**
+	* Container hangs 16px into the gutter. Useful for
+	* typographic alignment with and without containers.
+	*/
 	narrow: prop_types.default.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: prop_types.default.bool
 };
 const FlexGridComponent = FlexGrid;

package/lib/components/Grid/Grid.js

@@ -26,17 +26,44 @@ function Grid(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FlexGrid.FlexGridComponent, { ...props });
 }
 Grid.propTypes = {
+	/**
+	* Specify grid alignment. Default is center
+	*/
 	align: prop_types.default.oneOf([
 		"start",
 		"center",
 		"end"
 	]),
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Grid`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify a custom className to be applied to the `Grid`
+	*/
 	className: prop_types.default.string,
+	/**
+	* Collapse the gutter to 1px. Useful for fluid layouts.
+	* Rows have 1px of margin between them to match gutter.
+	*/
 	condensed: prop_types.default.bool,
+	/**
+	* Remove the default max width that the grid has set
+	*/
 	fullWidth: prop_types.default.bool,
+	/**
+	* Container hangs 16px into the gutter. Useful for
+	* typographic alignment with and without containers.
+	*/
 	narrow: prop_types.default.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: prop_types.default.bool
 };
 const GridAsGridComponent = Grid;

package/lib/components/Grid/GridContext.js

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

package/lib/components/Grid/Row.js

@@ -34,10 +34,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: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Row`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify a custom className to be applied to the `Row`
+	*/
 	className: prop_types.default.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: prop_types.default.bool,
+	/**
+	* Specify a single row as narrow. The container will hang
+	* 16px into the gutter.
+	*/
 	narrow: prop_types.default.bool
 };
 //#endregion

package/lib/components/Heading/index.js

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

package/lib/components/Icon/Icon.Skeleton.js

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

package/lib/components/IconButton/index.js

@@ -67,6 +67,9 @@ const IconButton = (0, react.forwardRef)(({ align, autoAlign = false, badgeCount
 	});
 });
 IconButton.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: require_deprecateValuesWithin.deprecateValuesWithin(prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -102,28 +105,93 @@ IconButton.propTypes = {
 		"right-start",
 		"right-end"
 	], require_mapPopoverAlign.mapPopoverAlign),
+	/**
+	* **Experimental**: Will attempt to automatically align the tooltip. Requires
+	* React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: prop_types.default.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: prop_types.default.number,
+	/**
+	* Optionally specify an href for your IconButton to become an `<a>` element
+	*/
 	href: prop_types.default.string,
+	/**
+	* Provide an icon or asset to be rendered inside of the IconButton
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your Button
+	*/
 	className: prop_types.default.string,
+	/**
+	* Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+	*/
 	closeOnActivation: prop_types.default.bool,
+	/**
+	* Specify whether the tooltip should be open when it first renders
+	*/
 	defaultOpen: prop_types.default.bool,
+	/**
+	* Specify whether a drop shadow should be rendered on the tooltip
+	*/
 	dropShadow: prop_types.default.bool,
+	/**
+	* Specify whether the Button should be disabled, or not
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip
+	*/
 	enterDelayMs: prop_types.default.number,
+	/**
+	* Specify whether the IconButton is currently selected
+	*/
 	isSelected: prop_types.default.bool,
+	/**
+	* Render the tooltip using the high-contrast theme
+	*/
 	highContrast: prop_types.default.bool,
+	/**
+	* Specify the type of button to be used as the base for the IconButton
+	*/
 	kind: prop_types.default.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: prop_types.default.node.isRequired,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: prop_types.default.number,
+	/**
+	* Optionally specify a `rel` when using an `<a>` element.
+	*/
 	rel: prop_types.default.string,
+	/**
+	* Specify the size of the Button.
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Optionally specify a `target` when using an `<a>` element.
+	*/
 	target: prop_types.default.string,
+	/**
+	* Specify an optional className to be added to your Tooltip wrapper
+	*/
 	wrapperClasses: prop_types.default.string
 };
 //#endregion

package/lib/components/IconIndicator/index.js

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

package/lib/components/IdPrefix/index.js

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

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -65,16 +65,50 @@ const InlineCheckbox = react.default.forwardRef((props, forwardRef) => {
 	});
 });
 InlineCheckbox.propTypes = {
+	/**
+	* Specify the label for the control
+	*/
 	["aria-label"]: prop_types.default.string.isRequired,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the label for the control
+	*/
 	ariaLabel: require_deprecate.deprecate(prop_types.default.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: prop_types.default.bool,
+	/**
+	* Specify whether the underlying input control should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide an `id` for the underlying input control
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify whether the control is in an indeterminate state
+	*/
 	indeterminate: prop_types.default.bool,
+	/**
+	* Provide a `name` for the underlying input control
+	*/
 	name: prop_types.default.string.isRequired,
+	/**
+	* Provide an optional hook that is called each time the input is updated
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Provide a handler that is invoked when a user clicks on the control
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the control
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* Provide an optional tooltip for the InlineCheckbox
+	*/
 	title: prop_types.default.string
 };
 //#endregion

package/lib/components/InlineLoading/InlineLoading.js

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

package/lib/components/Layer/index.js

@@ -52,18 +52,35 @@ const Layer = react.default.forwardRef((props, ref) => {
 });
 Layer.displayName = "Layer";
 Layer.propTypes = {
+	/**
+	* Specify a custom component or element to be rendered as the top-level
+	* element in the component
+	*/
 	as: prop_types.default.oneOfType([
 		prop_types.default.func,
 		prop_types.default.string,
 		prop_types.default.elementType
 	]),
+	/**
+	* Provide child elements to be rendered inside of `Theme`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be used on the outermost element rendered by
+	* the component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the layer level and override any existing levels based on hierarchy
+	*/
 	level: prop_types.default.oneOf([
 		0,
 		1,
 		2
 	]),
+	/**
+	* Applies a css background-color set to $layer-background
+	*/
 	withBackground: prop_types.default.bool
 };
 //#endregion

package/lib/components/Layout/index.js

@@ -44,14 +44,31 @@ const Layout = react.default.forwardRef(({ as: BaseComponent = "div", children,
 	});
 });
 Layout.propTypes = {
+	/**
+	* Specify a custom component or element to be rendered as the top-level
+	* element in the component
+	*/
 	as: prop_types.default.oneOfType([
 		prop_types.default.func,
 		prop_types.default.string,
 		prop_types.default.elementType
 	]),
+	/**
+	* Provide child elements to be rendered inside of `Layout`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be used on the outermost element rendered by
+	* the component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the desired density of components within this layout
+	*/
 	density: prop_types.default.oneOf(densities),
+	/**
+	* Specify the desired size of components within this layout
+	*/
 	size: prop_types.default.oneOf(sizes)
 };
 const LayoutConstraint = react.default.forwardRef(({ as: BaseComponent = "div", children, className, density, size, ...rest }, forwardRef) => {
@@ -72,18 +89,35 @@ const LayoutConstraint = react.default.forwardRef(({ as: BaseComponent = "div",
 	});
 });
 LayoutConstraint.propTypes = {
+	/**
+	* Specify a custom component or element to be rendered as the top-level
+	* element in the component
+	*/
 	as: prop_types.default.oneOfType([
 		prop_types.default.func,
 		prop_types.default.string,
 		prop_types.default.elementType
 	]),
+	/**
+	* Provide child elements to be rendered inside of `LayoutConstraint`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be used on the outermost element rendered by
+	* the component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the desired layout density constraints of this element's children
+	*/
 	density: prop_types.default.shape({
 		min: prop_types.default.oneOf(densities),
 		default: prop_types.default.oneOf(densities),
 		max: prop_types.default.oneOf(densities)
 	}),
+	/**
+	* Specify the desired layout size constraints of this element's children
+	*/
 	size: prop_types.default.shape({
 		min: prop_types.default.oneOf(sizes),
 		default: prop_types.default.oneOf(sizes),

package/lib/components/LayoutDirection/LayoutDirection.js

@@ -33,12 +33,22 @@ function LayoutDirection({ as: BaseComponent = "div", children, dir, ...rest })
 	});
 }
 LayoutDirection.propTypes = {
+	/**
+	* Customize the element type used to render the outermost node
+	*/
 	as: prop_types.default.oneOfType([
 		prop_types.default.func,
 		prop_types.default.string,
 		prop_types.default.elementType
 	]),
+	/**
+	* Provide child elements or components to be rendered inside of this
+	* component
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify the layout direction of this part of the page
+	*/
 	dir: prop_types.default.oneOf(["ltr", "rtl"]).isRequired
 };
 //#endregion

package/lib/components/LayoutDirection/useLayoutDirection.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-require("../../_virtual/_rolldown/runtime.js");
 const require_LayoutDirectionContext = require("./LayoutDirectionContext.js");
 let react = require("react");
 //#region src/components/LayoutDirection/useLayoutDirection.ts

package/lib/components/Link/Link.d.ts

@@ -43,7 +43,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     target?: HTMLAttributeAnchorTarget;
     /**
-     * Specify whether you want the link to receive visited styles after the link has been clicked
+     * When enabled, applies Carbon's visited-link styles to browser-controlled :visited link state.
      */
     visited?: boolean;
 }

package/lib/components/Link/Link.js

@@ -59,18 +59,46 @@ const Link = react.default.forwardRef(({ as: BaseComponent, children, className:
 });
 Link.displayName = "Link";
 Link.propTypes = {
+	/**
+	* Provide a custom element or component to render the top-level node for the
+	* component.
+	*/
 	as: prop_types.default.elementType,
+	/**
+	* Provide the content for the Link
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom className to be applied to the containing `<a>` node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify if the control should be disabled, or not
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide the `href` attribute for the `<a>` node
+	*/
 	href: prop_types.default.string,
+	/**
+	* Specify whether you want the inline version of this control
+	*/
 	inline: prop_types.default.bool,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* When enabled, applies Carbon's visited-link styles to browser-controlled :visited link state.
+	*/
 	visited: prop_types.default.bool
 };
 //#endregion

package/lib/components/ListBox/ListBox.js

@@ -77,18 +77,59 @@ const ListBox = (0, react.forwardRef)((props, ref) => {
 });
 ListBox.displayName = "ListBox";
 ListBox.propTypes = {
+	/**
+	* Provide the contents of your ListBox
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify a class name to be applied on the containing list box node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the ListBox is currently disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify whether the control is currently invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Specify the text to be displayed when the control is invalid
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Specify the id to be applied to the element containing the invalid text
+	*/
 	invalidTextId: prop_types.default.string,
+	/**
+	* Specify if the control should render open
+	*/
 	isOpen: 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.
+	*/
 	light: require_deprecate.deprecate(prop_types.default.bool, "The `light` prop for `ListBox` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Specify the size of the ListBox. Currently supports either `xs`, `sm`, `md` or `lg` as an option.
+	*/
 	size: require_ListBoxPropTypes.ListBoxSizePropType,
+	/**
+	* Specify the "type" of the ListBox. Currently supports either `default` or
+	* `inline` as an option.
+	*/
 	type: require_ListBoxPropTypes.ListBoxTypePropType,
+	/**
+	* 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.string,
+	/**
+	* Specify the id to be applied to the element containing the warn text
+	*/
 	warnTextId: prop_types.default.string
 };
 //#endregion

package/lib/components/ListBox/ListBoxField.js

@@ -33,10 +33,27 @@ function ListBoxField({ children, disabled, tabIndex, ...rest }) {
 	});
 }
 ListBoxField.propTypes = {
+	/**
+	* Typically set by `getToggleButtonProps`, this should specify whether the
+	* field has a popup.
+	*/
 	"aria-haspopup": prop_types.default.oneOfType([prop_types.default.string, prop_types.default.bool]),
+	/**
+	* Provide the contents of your ListBoxField
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify if the parent <ListBox> is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* The role for the component, should be set by `getToggleButtonProps` coming
+	* from Downshift
+	*/
 	role: prop_types.default.string,
+	/**
+	* Optional prop to specify the tabIndex of the <ListBox> trigger button
+	*/
 	tabIndex: prop_types.default.oneOfType([prop_types.default.number, prop_types.default.string])
 };
 //#endregion