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

package/es/components/Tabs/Tabs.js

@@ -79,13 +79,36 @@ function Tabs({ children, defaultSelectedIndex = 0, onChange, selectedIndex: con
 	});
 }
 Tabs.propTypes = {
+	/**
+	* Provide child elements to be rendered inside the `Tabs`.
+	* These elements should render either `TabsList` or `TabsPanels`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify which content tab should be initially selected when the component
+	* is first rendered
+	*/
 	defaultSelectedIndex: PropTypes.number,
+	/**
+	* Whether the render Tab children should be dismissable.
+	*/
 	dismissable: PropTypes.bool,
+	/**
+	* Provide an optional function which is called whenever the state of the
+	* `Tabs` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* If specifying the `onTabCloseRequest` prop, provide a callback function
+	* responsible for removing the tab when close button is pressed on one of the Tab elements
+	*/
 	onTabCloseRequest: (props) => {
 		if (props.dismissable && !props.onTabCloseRequest) return /* @__PURE__ */ new Error("dismissable property specified without also providing an onTabCloseRequest property.");
 	},
+	/**
+	* Control which content panel is currently selected. This puts the component
+	* in a controlled mode and should be used along with `onChange`
+	*/
 	selectedIndex: PropTypes.number
 };
 function TabsVertical({ children, height, defaultSelectedIndex = 0, onChange, selectedIndex: controlledSelectedIndex, ...rest }) {
@@ -112,10 +135,29 @@ function TabsVertical({ children, height, defaultSelectedIndex = 0, onChange, se
 	});
 }
 TabsVertical.propTypes = {
+	/**
+	* Provide child elements to be rendered inside the `TabsVertical`.
+	* These elements should render either `TabsListVertical` or `TabsPanels`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify which content tab should be initially selected when the component
+	* is first rendered
+	*/
 	defaultSelectedIndex: PropTypes.number,
+	/**
+	* Option to set a height style only if using vertical variation
+	*/
 	height: PropTypes.string,
+	/**
+	* Provide an optional function which is called whenever the state of the
+	* `Tabs` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Control which content panel is currently selected. This puts the component
+	* in a controlled mode and should be used along with `onChange`
+	*/
 	selectedIndex: PropTypes.number
 };
 /**
@@ -161,7 +203,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs__icon--default`]: iconSize === "default",
 		[`${prefix}--tabs__icon--lg`]: iconSize === "lg",
 		[`${prefix}--layout--size-lg`]: iconSize === "lg",
-		[`${prefix}--layout--size-${size}`]: size && !hasSecondaryLabelTabs,
+		[`${prefix}--layout--size-${size}`]: size && !hasSecondaryLabelTabs && (contained || size === "sm" || size === "md"),
 		[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable
@@ -331,32 +373,80 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 	});
 }
 TabList.propTypes = {
+	/**
+	* Specify whether the content tab should be activated automatically or
+	* manually
+	*/
 	activation: PropTypes.oneOf(["automatic", "manual"]),
+	/**
+	* Provide an accessible label to be read when a user interacts with this
+	* component
+	*/
 	"aria-label": PropTypes.string,
+	/**
+	* Provide child elements to be rendered inside `ContentTabs`.
+	* These elements should render a `ContentTab`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether component is contained type
+	*/
 	contained: PropTypes.bool,
+	/**
+	* Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+	*/
 	fullWidth: PropTypes.bool,
+	/**
+	* If using `IconTab`, specify the size of the icon being used.
+	*/
 	iconSize: PropTypes.oneOf(["default", "lg"]),
+	/**
+	* Provide the props that describe the left overflow button
+	*/
 	leftOverflowButtonProps: PropTypes.object,
+	/**
+	* Specify whether to use the light component variant
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `TabList` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Provide the props that describe the right overflow button
+	*/
 	rightOverflowButtonProps: PropTypes.object,
+	/**
+	* Optionally provide a delay (in milliseconds) passed to the lodash
+	* debounce of the onScroll handler. This will impact the responsiveness
+	* of scroll arrow buttons rendering when scrolling to the first or last tab.
+	*/
 	scrollDebounceWait: PropTypes.number,
+	/**
+	* Choose whether to automatically scroll
+	* to newly selected tabs on component rerender
+	*/
 	scrollIntoView: PropTypes.bool,
+	/**
+	* Specify the size of the tabs.
+	*
+	* Supports `sm` and `md` for line tabs.
+	* Supports `sm`, `md`, and `lg` for contained tabs.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	])
 };
-function TabListVertical({ activation = "automatic", "aria-label": label, children, className: customClassName, scrollIntoView, ...rest }) {
+function TabListVertical({ activation = "automatic", "aria-label": label, children, className: customClassName, scrollIntoView, size, ...rest }) {
 	const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex } = React.useContext(TabsContext);
 	const prefix = usePrefix();
 	const ref = useRef(null);
 	const [isOverflowingBottom, setIsOverflowingBottom] = useState(false);
 	const [isOverflowingTop, setIsOverflowingTop] = useState(false);
 	const isSm = useMatchMedia(smMediaQuery);
-	const className = classNames(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, customClassName);
+	const className = classNames(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, { [`${prefix}--layout--size-${size}`]: size }, customClassName);
 	const tabs = useRef([]);
 	function onKeyDown(event) {
 		if (matches(event, [
@@ -428,6 +518,7 @@ function TabListVertical({ activation = "automatic", "aria-label": label, childr
 		...rest,
 		"aria-label": label,
 		contained: true,
+		size: size === "xl" ? "lg" : size,
 		children
 	});
 	return /* @__PURE__ */ jsxs("div", {
@@ -460,10 +551,34 @@ function TabListVertical({ activation = "automatic", "aria-label": label, childr
 	});
 }
 TabListVertical.propTypes = {
+	/**
+	* Specify whether the content tab should be activated automatically or
+	* manually
+	*/
 	activation: PropTypes.oneOf(["automatic", "manual"]),
+	/**
+	* Provide an accessible label to be read when a user interacts with this
+	* component
+	*/
 	"aria-label": PropTypes.string,
+	/**
+	* Provide child elements to be rendered inside `ContentTabs`.
+	* These elements should render a `ContentTab`
+	*/
 	children: PropTypes.node,
-	className: PropTypes.string
+	/**
+	* Specify an optional className to be added to the container node
+	*/
+	className: PropTypes.string,
+	/**
+	* Specify the size of the tabs.
+	*/
+	size: PropTypes.oneOf([
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	])
 };
 /**
 * Helper function to set up the behavior when a button is "long pressed".
@@ -677,14 +792,44 @@ const Tab = forwardRef(({ as = "button", children, className: customClassName, d
 	}), DismissIcon] });
 });
 Tab.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default button
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Provide child elements to be rendered inside `Tab`.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your Tab
+	*/
 	className: PropTypes.string,
+	/**
+	* Whether your Tab is disabled.
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* 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,
+	/**
+	* An optional parameter to allow overriding the anchor rendering.
+	* Useful for using Tab along with react-router or other client
+	* side router libraries.
+	*/
 	renderButton: PropTypes.func,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* An optional label to render under the primary tab label.
+	* Only useful for contained tabs.
+	*/
 	secondaryLabel: PropTypes.string
 };
 /**
@@ -715,12 +860,37 @@ const IconTab = React.forwardRef(({ badgeIndicator, children, className: customC
 	});
 });
 IconTab.propTypes = {
+	/**
+	* **Experimental**: Display an empty dot badge on the Tab.
+	*/
 	badgeIndicator: PropTypes.bool,
+	/**
+	* Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your Tab
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the tooltip for the icon should be open when it first renders
+	*/
 	defaultOpen: PropTypes.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
+	*/
 	enterDelayMs: PropTypes.number,
+	/**
+	* Provide the label to be rendered inside 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 the badgeIndicator then provide a
+	* label with describing that there is a new notification.
+	*/
 	label: PropTypes.node.isRequired,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: PropTypes.number
 };
 const TabPanel = React.forwardRef(({ children, className: customClassName, ...rest }, forwardRef) => {
@@ -742,7 +912,13 @@ const TabPanel = React.forwardRef(({ children, className: customClassName, ...re
 	});
 });
 TabPanel.propTypes = {
+	/**
+	* Provide child elements to be rendered inside `TabPanel`.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to TabPanel.
+	*/
 	className: PropTypes.string
 };
 function TabPanels({ children }) {
@@ -775,6 +951,10 @@ function TabPanels({ children }) {
 		});
 	}) });
 }
-TabPanels.propTypes = { children: PropTypes.node };
+TabPanels.propTypes = { 
+/**
+* Provide child elements to be rendered inside `TabPanels`.
+*/
+children: PropTypes.node };
 //#endregion
 export { IconTab, Tab, TabList, TabListVertical, TabPanel, TabPanels, Tabs, TabsVertical };

package/es/components/Tag/DismissibleTag.js

@@ -95,9 +95,21 @@ const DismissibleTag = forwardRef(({ className, decorator, disabled, id, renderI
 	});
 });
 DismissibleTag.propTypes = {
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify if the `DismissibleTag` is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify the tooltip alignment for the dismiss button
+	*/
 	dismissTooltipAlignment: PropTypes.oneOf([
 		"top",
 		"bottom",
@@ -112,15 +124,46 @@ DismissibleTag.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* Provide a custom tooltip label for the dismiss button
+	*/
 	dismissTooltipLabel: PropTypes.string,
+	/**
+	* Specify the id for the tag.
+	*/
 	id: PropTypes.string,
+	/**
+	* Click handler for filter tag close button.
+	*/
 	onClose: PropTypes.func,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: PropTypes.oneOf(Object.keys(SIZES)),
+	/**
+	* **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` 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."),
+	/**
+	* Provide text to be rendered inside of a the tag.
+	*/
 	text: PropTypes.string,
+	/**
+	* Provide a custom `title` to be inserted in the tag.
+	*/
 	tagTitle: PropTypes.string,
+	/**
+	* Text to show on clear filters
+	*/
 	title: PropTypes.string,
+	/**
+	* Specify the type of the `Tag`
+	*/
 	type: PropTypes.oneOf(Object.keys(TYPES))
 };
 //#endregion

package/es/components/Tag/OperationalTag.js

@@ -89,12 +89,34 @@ const OperationalTag = forwardRef(({ className, disabled, id, renderIcon, size,
 	});
 });
 OperationalTag.propTypes = {
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify if the `OperationalTag` is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify the id for the tag.
+	*/
 	id: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: PropTypes.oneOf(Object.keys(SIZES)),
+	/**
+	* Provide text to be rendered inside of a the tag.
+	*/
 	text: PropTypes.string,
+	/**
+	* Specify the type of the `Tag`
+	*/
 	type: PropTypes.oneOf(Object.keys(TYPES))
 };
 //#endregion

package/es/components/Tag/SelectableTag.js

@@ -88,15 +88,46 @@ const SelectableTag = forwardRef(({ className, disabled, id, renderIcon, onChang
 	});
 });
 SelectableTag.propTypes = {
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify if the `SelectableTag` is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify the id for the tag.
+	*/
 	id: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Provide an optional hook that is called when selected is changed
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide an optional function to be called when the tag is clicked.
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Specify the state of the selectable tag.
+	*/
 	selected: PropTypes.bool,
+	/**
+	* Specify the default state of the selectable tag.
+	*/
 	defaultSelected: PropTypes.bool,
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: PropTypes.oneOf(Object.keys(SIZES)),
+	/**
+	* Provide text to be rendered inside of a the tag.
+	*/
 	text: PropTypes.string
 };
 //#endregion

package/es/components/Tag/Tag.Skeleton.js

@@ -28,7 +28,14 @@ function TagSkeleton({ className, size, ...rest }) {
 	});
 }
 TagSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the size of the Tag. Currently supports either `sm` or
+	* default sizes.
+	*/
 	size: PropTypes.oneOf(["sm"])
 };
 //#endregion

package/es/components/Tag/Tag.js

@@ -146,18 +146,59 @@ const Tag = React.forwardRef(({ children, className, decorator, id, type, filter
 	});
 });
 Tag.propTypes = {
+	/**
+	* Provide an alternative tag or component to use instead of the default
+	* wrapping element
+	*/
 	as: PropTypes.elementType,
+	/**
+	* Provide content to be rendered inside of a `Tag`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify if the `Tag` is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Determine if `Tag` is a filter/chip
+	*/
 	filter: deprecate(PropTypes.bool, "The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead."),
+	/**
+	* Specify the id for the tag.
+	*/
 	id: PropTypes.string,
+	/**
+	* Click handler for filter tag close button.
+	*/
 	onClose: deprecate(PropTypes.func, "The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead."),
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: PropTypes.oneOf(Object.keys(SIZES)),
+	/**
+	* **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` 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."),
+	/**
+	* Text to show on clear filters
+	*/
 	title: deprecate(PropTypes.string, "The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead."),
+	/**
+	* Specify the type of the `Tag`
+	*/
 	type: PropTypes.oneOf(Object.keys(TYPES))
 };
 //#endregion

package/es/components/Text/Text.js

@@ -49,12 +49,22 @@ const Text = forwardRef(({ as, children, dir = "auto", ...rest }, ref) => {
 	});
 });
 Text.propTypes = {
+	/**
+	* Provide a custom element type used to render the outermost node
+	*/
 	as: PropTypes.oneOfType([
 		PropTypes.func,
 		PropTypes.string,
 		PropTypes.elementType
 	]),
+	/**
+	* Provide child elements or text to be rendered inside of this component
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify the text direction to be used for this component and any of its
+	* children
+	*/
 	dir: PropTypes.oneOf([
 		"ltr",
 		"rtl",

package/es/components/Text/TextDirection.js

@@ -33,12 +33,23 @@ const TextDirection = ({ children, dir = "auto", getTextDirection }) => {
 	});
 };
 TextDirection.propTypes = {
+	/**
+	* Provide children to be rendered inside of this component
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify the text direction for rendered children
+	*/
 	dir: PropTypes.oneOf([
 		"ltr",
 		"rtl",
 		"auto"
 	]),
+	/**
+	* Optionally provide a custom function to get the text direction for a piece
+	* of text. Whatever is returned will become the value of the `dir` attribute
+	* on a node of text. Should return one of: 'ltr', 'rtl', or 'auto'
+	*/
 	getTextDirection: PropTypes.func
 };
 //#endregion

package/es/components/TextArea/TextArea.Skeleton.js

@@ -27,7 +27,13 @@ const TextAreaSkeleton = (props) => {
 	});
 };
 TextAreaSkeleton.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