@carbon/react 1.110.0 → 1.111.0-rc.0

package/es/components/Grid/FlexGrid.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { GridSettings } from "./GridContext.js";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/FlexGrid.tsx
@@ -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

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/Row.tsx
@@ -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

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Icon/Icon.Skeleton.tsx
@@ -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

@@ -12,8 +12,8 @@ import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import ButtonBase from "../Button/ButtonBase.js";
 import BadgeIndicator from "../BadgeIndicator/index.js";
-import { forwardRef } from "react";
 import classNames from "classnames";
+import { forwardRef } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/IconButton/index.tsx
@@ -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

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, CheckmarkOutline, CircleDash, ErrorFilled, InProgress, Incomplete, PendingFilled, UndefinedFilled, UnknownFilled, WarningAltFilled, WarningAltInvertedFilled, WarningSquareFilled } from "@carbon/icons-react";
@@ -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

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import Loading_default from "../Loading/index.js";
-import { useEffect, useRef } from "react";
 import classNames from "classnames";
+import { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, ErrorFilled } from "@carbon/icons-react";
@@ -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

package/es/components/Layer/index.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { LayerContext } from "./LayerContext.js";
 import { MAX_LEVEL, MIN_LEVEL, levels } from "./LayerLevel.js";
 import { clamp } from "../../internal/clamp.js";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Layer/index.tsx
@@ -48,18 +48,35 @@ const Layer = React.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: PropTypes.oneOfType([
 		PropTypes.func,
 		PropTypes.string,
 		PropTypes.elementType
 	]),
+	/**
+	* Provide child elements to be rendered inside of `Theme`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be used on the outermost element rendered by
+	* the component
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the layer level and override any existing levels based on hierarchy
+	*/
 	level: PropTypes.oneOf([
 		0,
 		1,
 		2
 	]),
+	/**
+	* Applies a css background-color set to $layer-background
+	*/
 	withBackground: PropTypes.bool
 };
 //#endregion

package/es/components/Layout/index.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Layout/index.tsx
@@ -40,14 +40,31 @@ const Layout = React.forwardRef(({ as: BaseComponent = "div", children, classNam
 	});
 });
 Layout.propTypes = {
+	/**
+	* Specify a custom component or element to be rendered as the top-level
+	* element in the component
+	*/
 	as: PropTypes.oneOfType([
 		PropTypes.func,
 		PropTypes.string,
 		PropTypes.elementType
 	]),
+	/**
+	* Provide child elements to be rendered inside of `Layout`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be used on the outermost element rendered by
+	* the component
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the desired density of components within this layout
+	*/
 	density: PropTypes.oneOf(densities),
+	/**
+	* Specify the desired size of components within this layout
+	*/
 	size: PropTypes.oneOf(sizes)
 };
 const LayoutConstraint = React.forwardRef(({ as: BaseComponent = "div", children, className, density, size, ...rest }, forwardRef) => {
@@ -68,18 +85,35 @@ const LayoutConstraint = React.forwardRef(({ as: BaseComponent = "div", children
 	});
 });
 LayoutConstraint.propTypes = {
+	/**
+	* Specify a custom component or element to be rendered as the top-level
+	* element in the component
+	*/
 	as: PropTypes.oneOfType([
 		PropTypes.func,
 		PropTypes.string,
 		PropTypes.elementType
 	]),
+	/**
+	* Provide child elements to be rendered inside of `LayoutConstraint`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be used on the outermost element rendered by
+	* the component
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the desired layout density constraints of this element's children
+	*/
 	density: PropTypes.shape({
 		min: PropTypes.oneOf(densities),
 		default: PropTypes.oneOf(densities),
 		max: PropTypes.oneOf(densities)
 	}),
+	/**
+	* Specify the desired layout size constraints of this element's children
+	*/
 	size: PropTypes.shape({
 		min: PropTypes.oneOf(sizes),
 		default: PropTypes.oneOf(sizes),

package/es/components/LayoutDirection/LayoutDirection.js

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

package/es/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/es/components/Link/Link.js

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