@carbon/react 1.110.0 → 1.111.0-rc.0

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.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 { CheckmarkOutline, CircleDash, Incomplete, Warning } from "@carbon/icons-react";
@@ -70,11 +70,30 @@ function ProgressIndicator({ children, className: customClassName, currentIndex:
 	});
 }
 ProgressIndicator.propTypes = {
+	/**
+	* Provide `<ProgressStep>` components to be rendered in the
+	* `<ProgressIndicator>`
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional className to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* Optionally specify the current step array index
+	*/
 	currentIndex: PropTypes.number,
+	/**
+	* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Specify whether the progress steps should be split equally in size in the div
+	*/
 	spaceEqually: PropTypes.bool,
+	/**
+	* Determines whether or not the ProgressIndicator should be rendered vertically.
+	*/
 	vertical: PropTypes.bool
 };
 function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t = defaultTranslateWithId, ...rest }) {
@@ -145,18 +164,57 @@ function ProgressStep({ label, description, className, current, complete, invali
 	});
 }
 ProgressStep.propTypes = {
+	/**
+	* Provide an optional className to be applied to the containing `<li>` node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the step has been completed
+	*/
 	complete: PropTypes.bool,
+	/**
+	* Specify whether the step is the current step
+	*/
 	current: PropTypes.bool,
+	/**
+	* Provide a description for the `<ProgressStep>`
+	*/
 	description: PropTypes.string,
+	/**
+	* Specify whether the step is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Index of the current step within the ProgressIndicator
+	*/
 	index: PropTypes.number,
+	/**
+	* Specify whether the step is invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the label for the `<ProgressStep>`
+	*/
 	label: PropTypes.node.isRequired,
+	/**
+	* A callback called if the step is clicked or the enter key is pressed
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Provide the props that describe a progress step tooltip
+	*/
 	overflowTooltipProps: PropTypes.object,
+	/**
+	* Provide an optional secondary label
+	*/
 	secondaryLabel: PropTypes.string,
+	/**
+	* The ID of the tooltip content.
+	*/
 	tooltipId: PropTypes.string,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func
 };
 //#endregion

package/es/components/RadioButton/RadioButton.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/RadioButton/RadioButton.Skeleton.tsx
@@ -26,6 +26,10 @@ function RadioButtonSkeleton(props) {
 		children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--radio-button ${prefix}--skeleton` }), /* @__PURE__ */ jsx("span", { className: `${prefix}--radio-button__label ${prefix}--skeleton` })]
 	});
 }
-RadioButtonSkeleton.propTypes = { className: PropTypes.string };
+RadioButtonSkeleton.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: PropTypes.string };
 //#endregion
 export { RadioButtonSkeleton as default };

package/es/components/RadioButton/RadioButton.js

@@ -13,8 +13,8 @@ import { isComponentElement } from "../../internal/utils.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
-import React, { cloneElement, useRef } from "react";
 import classNames from "classnames";
+import React, { cloneElement, useRef } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RadioButton/RadioButton.tsx
@@ -85,25 +85,88 @@ const RadioButton = React.forwardRef((props, ref) => {
 });
 RadioButton.displayName = "RadioButton";
 RadioButton.propTypes = {
+	/**
+	* Specify whether the `<RadioButton>` is currently checked
+	*/
 	checked: PropTypes.bool,
+	/**
+	* Provide an optional className to be applied to the containing node
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify whether the `<RadioButton>` should be checked by default
+	*/
 	defaultChecked: PropTypes.bool,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Provide a unique id for the underlying `<input>` node
+	*/
 	id: PropTypes.string,
+	/**
+	* Provide where label text should be placed
+	* NOTE: `top`/`bottom` are deprecated
+	*/
 	labelPosition: PropTypes.oneOf(["right", "left"]),
+	/**
+	* Provide label text to be read by screen readers when interacting with the
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* Provide a name for the underlying `<input>` node
+	*/
 	name: PropTypes.string,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide a handler that is invoked when a user clicks on the control
+	*/
 	onClick: PropTypes.func,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* 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,
+	/**
+	* 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,
+	/**
+	* Specify whether the RadioButton should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` 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."),
+	/**
+	* Specify the value of the `<RadioButton>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 //#endregion

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -14,8 +14,8 @@ import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import RadioButton_default from "../RadioButton/index.js";
 import { Legend } from "../Text/createTextComponent.js";
-import React, { Children, cloneElement, createContext, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import React, { Children, cloneElement, createContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -114,24 +114,83 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 	});
 });
 RadioButtonGroup.propTypes = {
+	/**
+	* Provide a collection of `<RadioButton>` components to render in the group
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify the `<RadioButton>` to be selected by default
+	*/
 	defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the group is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: PropTypes.node,
+	/**
+	* 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 where label text should be placed
+	*/
 	labelPosition: PropTypes.oneOf(["left", "right"]),
+	/**
+	* Provide a legend to the RadioButtonGroup input that you are
+	* exposing to the user
+	*/
 	legendText: PropTypes.node,
+	/**
+	* Specify the name of the underlying `<input>` nodes
+	*/
 	name: PropTypes.string.isRequired,
+	/**
+	* Provide an optional `onChange` hook that is called whenever the value of
+	* the group changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide where radio buttons should be placed
+	*/
 	orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+	/**
+	* Whether the RadioButtonGroup should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* `true` to specify if radio selection in group is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` 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."),
+	/**
+	* Specify the value that is currently selected in the group
+	*/
 	valueSelected: 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
 };
 RadioButtonGroup.displayName = "RadioButtonGroup";

package/es/components/RadioTile/RadioTile.js

@@ -5,18 +5,18 @@
  * 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 { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
-import React, { cloneElement } from "react";
 import classNames from "classnames";
+import React, { cloneElement } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, RadioButton, RadioButtonChecked } from "@carbon/icons-react";
@@ -94,19 +94,64 @@ const RadioTile = React.forwardRef(({ children, className: customClassName, deco
 });
 RadioTile.displayName = "RadioTile";
 RadioTile.propTypes = {
+	/**
+	* Specify whether the `RadioTile` should be checked.
+	*/
 	checked: PropTypes.bool,
+	/**
+	* The `RadioTile` content.
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional `className` to be applied to the underlying `<label>`.
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify whether the `RadioTile` should be disabled.
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify if the `ExpandableTile` component should be rendered with rounded corners.
+	* Only valid when `slug` prop is present
+	*/
 	hasRoundedCorners: PropTypes.bool,
+	/**
+	* Provide a unique id for the underlying `<input>`.
+	*/
 	id: PropTypes.string,
+	/**
+	* `true` to use the light version. For use on `$layer-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 `RadioTile` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Provide a `name` for the underlying `<input>`.
+	*/
 	name: PropTypes.string,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `RadioTile` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release."),
+	/**
+	* Specify the tab index of the underlying `<input>`.
+	*/
 	tabIndex: PropTypes.number,
+	/**
+	* Specify the value of the underlying `<input>`.
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 //#endregion

package/es/components/Search/Search.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Search/Search.Skeleton.tsx
@@ -32,13 +32,22 @@ const SearchSkeleton = ({ small = false, size, className, ...rest }) => {
 	});
 };
 SearchSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the size of the SearchSkeleton
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify whether the Search should be a small variant
+	*/
 	small: deprecate(PropTypes.bool, "The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.")
 };
 //#endregion

package/es/components/Search/Search.js

@@ -5,19 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { isSearchValuePresent } from "./utils.js";
-import React, { useContext, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Search } from "@carbon/icons-react";
@@ -155,29 +155,90 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 });
 Search$1.displayName = "Search";
 Search$1.propTypes = {
+	/**
+	* Specify an optional value for the `autocomplete` property on the underlying
+	* `<input>`, defaults to "off"
+	*/
 	autoComplete: PropTypes.string,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify a label to be read by screen readers on the "close" button
+	*/
 	closeButtonLabelText: PropTypes.string,
+	/**
+	* Optionally provide the default value of the `<input>`
+	*/
 	defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the input
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether or not ExpandableSearch should render expanded or not
+	*/
 	isExpanded: PropTypes.bool,
+	/**
+	* Provide the label text for the Search icon
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* Specify light version or default version of this control
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `Search` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release."),
+	/**
+	* Optional callback called when the search value changes.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: PropTypes.func,
+	/**
+	* Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+	*/
 	onExpand: PropTypes.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the input
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* Provide an optional placeholder text for the Search.
+	* Note: if the label and placeholder differ,
+	* VoiceOver on Mac will read both
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Deprecated, since <input type="search"> already provides correct semantics.
+	* Specify the role for the underlying `<input>`, defaults to `searchbox`
+	*/
 	role: deprecate(PropTypes.string, "The `role` prop has been deprecated since <input type=\"search\"> already provides correct semantics. It will be removed in the next major release of Carbon."),
+	/**
+	* Specify the size of the Search
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify the type of the `<input>`
+	*/
 	type: PropTypes.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 function CustomSearchIcon({ icon: Icon }) {
@@ -185,6 +246,10 @@ function CustomSearchIcon({ icon: Icon }) {
 	if (Icon) return /* @__PURE__ */ jsx(Icon, { className: `${prefix}--search-magnifier-icon` });
 	return /* @__PURE__ */ jsx(Search, { className: `${prefix}--search-magnifier-icon` });
 }
-CustomSearchIcon.propTypes = { icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) };
+CustomSearchIcon.propTypes = { 
+/**
+* Rendered icon for the Search. Can be a React component class
+*/
+icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) };
 //#endregion
 export { Search$1 as default };

package/es/components/Select/Select.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/Select/Select.Skeleton.tsx
@@ -29,7 +29,13 @@ const SelectSkeleton = ({ hideLabel, className, ...rest }) => {
 	});
 };
 SelectSkeleton.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