@carbon/react 1.110.0 → 1.111.0-rc.0

package/es/components/Tag/DismissibleTag.js

@@ -16,8 +16,8 @@ import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
 import Tag, { SIZES, TYPES } from "./Tag.js";
-import { cloneElement, forwardRef, useRef, useState } from "react";
 import classNames from "classnames";
+import { cloneElement, forwardRef, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -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

@@ -13,8 +13,8 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
 import Tag, { SIZES } from "./Tag.js";
-import { forwardRef, useRef, useState } from "react";
 import classNames from "classnames";
+import { forwardRef, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Tag/OperationalTag.tsx
@@ -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

@@ -14,8 +14,8 @@ import { mergeRefs } from "../../tools/mergeRefs.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
 import Tag, { SIZES } from "./Tag.js";
-import { forwardRef, useRef, useState } from "react";
 import classNames from "classnames";
+import { forwardRef, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Tag/SelectableTag.tsx
@@ -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

@@ -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/Tag/Tag.Skeleton.tsx
@@ -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

@@ -15,8 +15,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import { AILabel } from "../AILabel/index.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
-import React, { cloneElement, useRef, useState } from "react";
 import classNames from "classnames";
+import React, { cloneElement, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -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

@@ -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, jsxs } from "react/jsx-runtime";
 //#region src/components/TextArea/TextArea.Skeleton.tsx
@@ -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

package/es/components/TextArea/TextArea.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
@@ -17,8 +17,8 @@ import { hasHelperText } from "../../internal/hasHelperText.js";
 import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { getAnnouncement } from "../../internal/getAnnouncement.js";
-import { cloneElement, forwardRef, useContext, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import { cloneElement, forwardRef, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -297,30 +297,110 @@ const TextArea = forwardRef((props, forwardRef) => {
 });
 TextArea.displayName = "TextArea";
 TextArea.propTypes = {
+	/**
+	* Provide a custom className that is applied to the wrapper node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the `cols` attribute for the underlying `<textarea>` node
+	*/
 	cols: PropTypes.number,
+	/**
+	* Specify the method used for calculating the counter number
+	*/
 	counterMode: PropTypes.oneOf(["character", "word"]),
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Optionally provide the default value of the `<textarea>`
+	*/
 	defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether to display the counter
+	*/
 	enableCounter: PropTypes.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: PropTypes.node,
+	/**
+	* Specify whether you want the underlying label to be visually hidden
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Provide a unique identifier for the control
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether the control is currently invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* `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: deprecate(PropTypes.bool, "The `light` prop for `TextArea` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Max entity count allowed for the textarea. This is needed in order for enableCounter to display
+	*/
 	maxCount: PropTypes.number,
+	/**
+	* Optionally provide an `onChange` handler that is called whenever `<textarea>`
+	* is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optionally provide an `onClick` handler that is called whenever the
+	* `<textarea>` is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Optionally provide an `onKeyDown` handler that is called whenever `<textarea>`
+	* is keyed
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* Specify the placeholder attribute for the `<textarea>`
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* Whether the textarea should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the rows attribute for the `<textarea>`
+	*/
 	rows: PropTypes.number,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `TextArea` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
+	/**
+	* Provide the current value of the `<textarea>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in warning state
+	*/
 	warnText: PropTypes.node
 };
 //#endregion

package/es/components/TextInput/ControlledPasswordInput.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";
 import { getTextInputProps } from "./util.js";
-import { forwardRef } from "react";
 import classNames from "classnames";
+import { forwardRef } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { View, ViewOff, WarningFilled } from "@carbon/icons-react";
@@ -106,37 +106,101 @@ const ControlledPasswordInput = forwardRef(({ labelText, className, id, placehol
 });
 ControlledPasswordInput.displayName = "ControlledPasswordInput";
 ControlledPasswordInput.propTypes = {
+	/**
+	* Provide a custom className that is applied directly to the underlying
+	* `<input>` node
+	*/
 	className: PropTypes.string,
+	/**
+	* Optionally provide the default value of the `<input>`
+	*/
 	defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: PropTypes.node,
+	/**
+	* Specify whether or not the underlying label is visually hidden
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* "Hide password" tooltip text on password visibility toggle
+	*/
 	hidePasswordLabel: PropTypes.string,
+	/**
+	* Provide a unique identifier for the input field
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify whether the control is currently invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* `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: deprecate(PropTypes.bool, "The `light` prop for `ControlledPasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Optionally provide an `onChange` handler that is called whenever `<input>`
+	* is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optionally provide an `onClick` handler that is called whenever the
+	* `<input>` is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Specify the placeholder attribute for the `<input>`
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* "Show password" tooltip text on password visibility toggle
+	*/
 	showPasswordLabel: PropTypes.string,
+	/**
+	* Specify the size of the Text Input.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify the alignment of the tooltip to the icon-only button.
+	* Can be one of: start, center, or end.
+	*/
 	tooltipAlignment: PropTypes.oneOf([
 		"start",
 		"center",
 		"end"
 	]),
+	/**
+	* Specify the direction of the tooltip for icon-only buttons.
+	* Can be either top, right, bottom, or left.
+	*/
 	tooltipPosition: PropTypes.oneOf([
 		"top",
 		"right",
 		"bottom",
 		"left"
 	]),
+	/**
+	* Provide the current value of the `<input>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 //#endregion