@carbon/react 1.110.0 → 1.111.0-rc.0

package/es/components/Select/Select.js

@@ -14,8 +14,8 @@ import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.
 import { AILabel } from "../AILabel/index.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import React, { cloneElement, forwardRef, useContext, useState } from "react";
 import classNames from "classnames";
+import React, { cloneElement, forwardRef, useContext, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -98,25 +98,27 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 	};
 	const candidate = slug ?? decorator;
 	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "mini" }) : candidate;
-	const input = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("select", {
-			...other,
-			...ariaProps,
-			id,
-			className: inputClasses,
-			disabled: normalizedProps.disabled || void 0,
-			"aria-invalid": normalizedProps.invalid || void 0,
-			"aria-readonly": readOnly || void 0,
-			title,
-			onChange: composeEventHandlers([onChange, handleChange]),
-			...readOnlyEventHandlers,
-			ref,
-			children
-		}),
-		/* @__PURE__ */ jsx(ChevronDown, { className: `${prefix}--select__arrow` }),
-		normalizedProps.invalid && /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--select__invalid-icon` }),
-		!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
-	] });
+	const input = (() => {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("select", {
+				...other,
+				...ariaProps,
+				id,
+				className: inputClasses,
+				disabled: normalizedProps.disabled || void 0,
+				"aria-invalid": normalizedProps.invalid || void 0,
+				"aria-readonly": readOnly || void 0,
+				title,
+				onChange: composeEventHandlers([onChange, handleChange]),
+				...readOnlyEventHandlers,
+				ref,
+				children
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: `${prefix}--select__arrow` }),
+			normalizedProps.invalid && /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--select__invalid-icon` }),
+			!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
+		] });
+	})();
 	return /* @__PURE__ */ jsx("div", {
 		className: classNames(`${prefix}--form-item`, className),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -158,22 +160,77 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 });
 Select.displayName = "Select";
 Select.propTypes = {
+	/**
+	* Provide the contents of your Select
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the node containing the label and the select box
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `Select` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Optionally provide the default value of the `<select>`
+	*/
 	defaultValue: PropTypes.any,
+	/**
+	* 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 the label should be hidden, or not
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<select>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify whether you want the inline version of this control
+	*/
 	inline: PropTypes.bool,
+	/**
+	* Specify if the currently value is invalid.
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Message which is displayed if the value is invalid.
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide label text to be read by screen readers when interacting with the
+	* control
+	*/
 	labelText: PropTypes.node,
+	/**
+	* `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 `Select` 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."),
+	/**
+	* Reserved for use with Pagination component. Will not render a label for the
+	* select since Pagination renders one for us.
+	*/
 	noLabel: PropTypes.bool,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Whether the select should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the size of the Select Input.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
@@ -181,7 +238,13 @@ Select.propTypes = {
 		"lg"
 	]),
 	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 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/SelectItem/SelectItem.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/SelectItem/SelectItem.tsx
@@ -32,10 +32,25 @@ const SelectItem = ({ className, value = "", disabled = false, hidden = false, t
 	});
 };
 SelectItem.propTypes = {
+	/**
+	* Specify an optional className to be applied to the node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the <SelectItem> should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the <SelectItem> is hidden
+	*/
 	hidden: PropTypes.bool,
+	/**
+	* Provide the contents of your <SelectItem>
+	*/
 	text: PropTypes.string.isRequired,
+	/**
+	* Specify the value of the <SelectItem>
+	*/
 	value: PropTypes.any.isRequired
 };
 //#endregion

package/es/components/SelectItemGroup/SelectItemGroup.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/SelectItemGroup/SelectItemGroup.tsx
@@ -27,9 +27,21 @@ const SelectItemGroup = ({ children, className, disabled = false, label, ...othe
 	});
 };
 SelectItemGroup.propTypes = {
+	/**
+	* Provide the contents of your <SelectItemGroup>
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the <SelectItemGroup> should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify the label to be displayed
+	*/
 	label: PropTypes.string.isRequired
 };
 //#endregion

package/es/components/ShapeIndicator/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 { Caution, CircleFill, CircleStroke, Critical, CriticalSeverity, DiamondFill, LowSeverity } from "@carbon/icons-react";
@@ -76,9 +76,21 @@ const ShapeIndicator = React.forwardRef(({ className: customClassName, kind, lab
 	});
 });
 ShapeIndicator.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the kind of the Shape Indicator
+	*/
 	kind: PropTypes.oneOf(ShapeIndicatorKinds).isRequired,
+	/**
+	* Label next to the shape.
+	*/
 	label: PropTypes.string.isRequired,
+	/**
+	* Specify the text size of the Shape Indicator. Defaults to 12.
+	*/
 	textSize: PropTypes.oneOf([12, 14])
 };
 //#endregion

package/es/components/SkeletonIcon/SkeletonIcon.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/SkeletonIcon/SkeletonIcon.tsx
@@ -23,6 +23,10 @@ const SkeletonIcon = ({ className, ...other }) => {
 		...other
 	});
 };
-SkeletonIcon.propTypes = { className: PropTypes.string };
+SkeletonIcon.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: PropTypes.string };
 //#endregion
 export { SkeletonIcon as default };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.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/SkeletonPlaceholder/SkeletonPlaceholder.tsx
@@ -17,6 +17,10 @@ const SkeletonPlaceholder = ({ className, ...other }) => {
 		...other
 	});
 };
-SkeletonPlaceholder.propTypes = { className: PropTypes.string };
+SkeletonPlaceholder.propTypes = { 
+/**
+* Add a custom class to the component to set the height and width
+*/
+className: PropTypes.string };
 //#endregion
 export { SkeletonPlaceholder as default };

package/es/components/SkeletonText/SkeletonText.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
-import { useRef } from "react";
 import classNames from "classnames";
+import { useRef } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/components/SkeletonText/SkeletonText.tsx
@@ -68,10 +68,25 @@ const SkeletonText = ({ paragraph = false, lineCount = 3, width = "100%", headin
 	return /* @__PURE__ */ jsx(Fragment, { children: lines });
 };
 SkeletonText.propTypes = {
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* generates skeleton text at a larger size
+	*/
 	heading: PropTypes.bool,
+	/**
+	* the number of lines shown if paragraph is true
+	*/
 	lineCount: PropTypes.number,
+	/**
+	* will generate multiple lines of text
+	*/
 	paragraph: PropTypes.bool,
+	/**
+	* width (in px or %) of single line of text or max-width of paragraph lines
+	*/
 	width: PropTypes.string
 };
 //#endregion

package/es/components/Slider/Slider.Skeleton.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { LowerHandle, UpperHandle } from "./SliderHandles.js";
-import { useState } from "react";
 import classNames from "classnames";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Slider/Slider.Skeleton.tsx
@@ -67,10 +67,25 @@ const SliderSkeleton = ({ ariaLabel = "slider handle", unstable_ariaLabelHandleU
 	});
 };
 SliderSkeleton.propTypes = {
+	/**
+	* The `ariaLabel` for the handle icon.
+	*/
 	ariaLabel: PropTypes.string,
+	/**
+	* The `ariaLabel` for the upper bound slider handle when there are two handles.
+	*/
 	unstable_ariaLabelHandleUpper: PropTypes.string,
+	/**
+	* 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,
+	/**
+	* Turn the slider into a range slider.
+	*/
 	twoHandles: PropTypes.bool
 };
 //#endregion

package/es/components/Slider/Slider.js

@@ -15,8 +15,8 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { clamp } from "../../internal/clamp.js";
 import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from "./SliderHandles.js";
-import { useEffect, useMemo, useReducer, useRef } from "react";
 import classNames from "classnames";
+import { useEffect, useMemo, useReducer, useRef } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -826,38 +826,142 @@ const Slider = (props) => {
 	});
 };
 Slider.propTypes = {
+	/**
+	* The `ariaLabel` for the `<input>`.
+	*/
 	ariaLabelInput: PropTypes.string,
+	/**
+	* The child nodes.
+	*/
 	children: PropTypes.node,
+	/**
+	* The CSS class name for the slider.
+	*/
 	className: PropTypes.string,
+	/**
+	* `true` to disable this slider.
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* The callback to format the label associated with the minimum/maximum value.
+	*/
 	formatLabel: PropTypes.func,
+	/**
+	* `true` to hide the number input box.
+	*/
 	hideTextInput: PropTypes.bool,
+	/**
+	* The ID of the `<input>`.
+	*/
 	id: PropTypes.string,
+	/**
+	* The `type` attribute of the `<input>`.
+	*/
 	inputType: PropTypes.string,
+	/**
+	* `Specify whether the Slider is currently invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the Slider is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* The label for the slider.
+	*/
 	labelText: PropTypes.node,
+	/**
+	* Specify whether you want the underlying label to be visually hidden
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* `true` to use the light version.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `Slider` 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."),
+	/**
+	* The maximum value.
+	*/
 	max: PropTypes.number.isRequired,
+	/**
+	* The label associated with the maximum value.
+	*/
 	maxLabel: PropTypes.string,
+	/**
+	* The minimum value.
+	*/
 	min: PropTypes.number.isRequired,
+	/**
+	* The label associated with the minimum value.
+	*/
 	minLabel: PropTypes.string,
+	/**
+	* The `name` attribute of the `<input>`.
+	*/
 	name: PropTypes.string,
+	/**
+	* Provide an optional function to be called when the input element
+	* loses focus
+	*/
 	onBlur: PropTypes.func,
+	/**
+	* The callback to get notified of change in value.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide an optional function to be called when a key is pressed in the number input.
+	*/
 	onInputKeyUp: PropTypes.func,
+	/**
+	* The callback to get notified of value on handle release.
+	*/
 	onRelease: PropTypes.func,
+	/**
+	* Whether the slider should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: PropTypes.bool,
+	/**
+	* A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside the `step` increment will be considered invalid.
+	*/
 	step: PropTypes.number,
+	/**
+	* A value determining how much the value should increase/decrease by Shift+arrow keys,
+	* which will be `(max - min) / stepMultiplier`.
+	*/
 	stepMultiplier: PropTypes.number,
+	/**
+	* Supply a method to translate internal strings with your i18n tool of
+	* choice. Translation keys are available on the `translationIds` field for
+	* this component.
+	*/
 	translateWithId: PropTypes.func,
+	/**
+	* The `ariaLabel` for the upper bound `<input>` when there are two handles.
+	*/
 	unstable_ariaLabelInputUpper: PropTypes.string,
+	/**
+	* The `name` attribute of the upper bound `<input>` when there are two handles.
+	*/
 	unstable_nameUpper: PropTypes.string,
+	/**
+	* The upper bound when there are two handles.
+	*/
 	unstable_valueUpper: PropTypes.number,
+	/**
+	* The value of the slider. When there are two handles, value is the lower
+	* bound.
+	*/
 	value: PropTypes.number.isRequired,
+	/**
+	* Specify whether the Slider is in a warning state.
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Provide the text displayed when the Slider is in a warning state.
+	*/
 	warnText: PropTypes.node
 };
 //#endregion

package/es/components/Stack/Stack.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { forwardRef } from "react";
 import classNames from "classnames";
+import { forwardRef } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { spacing } from "@carbon/layout";
@@ -57,10 +57,30 @@ const Stack = forwardRef((props, ref) => {
 	});
 });
 Stack.propTypes = {
+	/**
+	* Provide a custom element type to render as the outermost element in
+	* the Stack component. By default, this component will render a `div`.
+	*/
 	as: PropTypes.elementType,
+	/**
+	* Provide the elements that will be rendered as children inside of the Stack
+	* component. These elements will have having spacing between them according
+	* to the `step` and `orientation` prop
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom class name to be used by the outermost element rendered by
+	* Stack
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide either a custom value or a step from the spacing scale to be used
+	* as the gap in the layout
+	*/
 	gap: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(SPACING_STEPS)]),
+	/**
+	* Specify the orientation of them items in the Stack
+	*/
 	orientation: PropTypes.oneOf(["horizontal", "vertical"])
 };
 //#endregion

package/es/components/StructuredList/StructuredList.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/StructuredList/StructuredList.Skeleton.tsx
@@ -57,7 +57,13 @@ function StructuredListSkeleton({ rowCount = 5, className, ...rest }) {
 	});
 }
 StructuredListSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* number of table rows
+	*/
 	rowCount: PropTypes.number
 };
 //#endregion