@carbon/react 1.110.0 → 1.111.0-rc.0

package/lib/components/Select/Select.js

@@ -15,10 +15,10 @@ const require_useNormalizedInputProps = require("../../internal/useNormalizedInp
 const require_index = require("../AILabel/index.js");
 const require_events = require("../../tools/events.js");
 const require_FormContext = require("../FluidForm/FormContext.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -102,25 +102,27 @@ const Select = (0, react.forwardRef)(({ className, decorator, id, inline = false
 	};
 	const candidate = slug ?? decorator;
 	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index.AILabel) ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
-	const input = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.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: require_events.composeEventHandlers([onChange, handleChange]),
-			...readOnlyEventHandlers,
-			ref,
-			children
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, { className: `${prefix}--select__arrow` }),
-		normalizedProps.invalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--select__invalid-icon` }),
-		!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
-	] });
+	const input = (() => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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: require_events.composeEventHandlers([onChange, handleChange]),
+				...readOnlyEventHandlers,
+				ref,
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, { className: `${prefix}--select__arrow` }),
+			normalizedProps.invalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--select__invalid-icon` }),
+			!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
+		] });
+	})();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, classnames.default)(`${prefix}--form-item`, className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -162,22 +164,77 @@ const Select = (0, react.forwardRef)(({ className, decorator, id, inline = false
 });
 Select.displayName = "Select";
 Select.propTypes = {
+	/**
+	* Provide the contents of your Select
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the node containing the label and the select box
+	*/
 	className: prop_types.default.string,
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `Select` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Optionally provide the default value of the `<select>`
+	*/
 	defaultValue: prop_types.default.any,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: prop_types.default.node,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Specify a custom `id` for the `<select>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify whether you want the inline version of this control
+	*/
 	inline: prop_types.default.bool,
+	/**
+	* Specify if the currently value is invalid.
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Message which is displayed if the value is invalid.
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Provide label text to be read by screen readers when interacting with the
+	* control
+	*/
 	labelText: prop_types.default.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: require_deprecate.deprecate(prop_types.default.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: prop_types.default.bool,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Whether the select should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* Specify the size of the Select Input.
+	*/
 	size: prop_types.default.oneOf([
 		"xs",
 		"sm",
@@ -185,7 +242,13 @@ Select.propTypes = {
 		"lg"
 	]),
 	slug: require_deprecate.deprecate(prop_types.default.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: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the control is in warning state
+	*/
 	warnText: prop_types.default.node
 };
 //#endregion

package/lib/components/SelectItem/SelectItem.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -36,10 +36,25 @@ const SelectItem = ({ className, value = "", disabled = false, hidden = false, t
 	});
 };
 SelectItem.propTypes = {
+	/**
+	* Specify an optional className to be applied to the node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the <SelectItem> should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify whether the <SelectItem> is hidden
+	*/
 	hidden: prop_types.default.bool,
+	/**
+	* Provide the contents of your <SelectItem>
+	*/
 	text: prop_types.default.string.isRequired,
+	/**
+	* Specify the value of the <SelectItem>
+	*/
 	value: prop_types.default.any.isRequired
 };
 //#endregion

package/lib/components/SelectItemGroup/SelectItemGroup.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -31,9 +31,21 @@ const SelectItemGroup = ({ children, className, disabled = false, label, ...othe
 	});
 };
 SelectItemGroup.propTypes = {
+	/**
+	* Provide the contents of your <SelectItemGroup>
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the <SelectItemGroup> should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the label to be displayed
+	*/
 	label: prop_types.default.string.isRequired
 };
 //#endregion

package/lib/components/ShapeIndicator/index.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -80,9 +80,21 @@ const ShapeIndicator = react.default.forwardRef(({ className: customClassName, k
 	});
 });
 ShapeIndicator.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the kind of the Shape Indicator
+	*/
 	kind: prop_types.default.oneOf(ShapeIndicatorKinds).isRequired,
+	/**
+	* Label next to the shape.
+	*/
 	label: prop_types.default.string.isRequired,
+	/**
+	* Specify the text size of the Shape Indicator. Defaults to 12.
+	*/
 	textSize: prop_types.default.oneOf([12, 14])
 };
 //#endregion

package/lib/components/SkeletonIcon/SkeletonIcon.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -27,6 +27,10 @@ const SkeletonIcon = ({ className, ...other }) => {
 		...other
 	});
 };
-SkeletonIcon.propTypes = { className: prop_types.default.string };
+SkeletonIcon.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: prop_types.default.string };
 //#endregion
 exports.default = SkeletonIcon;

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -27,6 +27,10 @@ const SkeletonPlaceholder = ({ className, ...other }) => {
 		...other
 	});
 };
-SkeletonPlaceholder.propTypes = { className: prop_types.default.string };
+SkeletonPlaceholder.propTypes = { 
+/**
+* Add a custom class to the component to set the height and width
+*/
+className: prop_types.default.string };
 //#endregion
 exports.default = SkeletonPlaceholder;

package/lib/components/SkeletonText/SkeletonText.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -72,10 +72,25 @@ const SkeletonText = ({ paragraph = false, lineCount = 3, width = "100%", headin
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: lines });
 };
 SkeletonText.propTypes = {
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* generates skeleton text at a larger size
+	*/
 	heading: prop_types.default.bool,
+	/**
+	* the number of lines shown if paragraph is true
+	*/
 	lineCount: prop_types.default.number,
+	/**
+	* will generate multiple lines of text
+	*/
 	paragraph: prop_types.default.bool,
+	/**
+	* width (in px or %) of single line of text or max-width of paragraph lines
+	*/
 	width: prop_types.default.string
 };
 //#endregion

package/lib/components/Slider/Slider.Skeleton.js

@@ -9,10 +9,10 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
 const require_SliderHandles = require("./SliderHandles.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -71,10 +71,25 @@ const SliderSkeleton = ({ ariaLabel = "slider handle", unstable_ariaLabelHandleU
 	});
 };
 SliderSkeleton.propTypes = {
+	/**
+	* The `ariaLabel` for the handle icon.
+	*/
 	ariaLabel: prop_types.default.string,
+	/**
+	* The `ariaLabel` for the upper bound slider handle when there are two handles.
+	*/
 	unstable_ariaLabelHandleUpper: prop_types.default.string,
+	/**
+	* Specify an optional className to add to the form item wrapper.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the label should be hidden, or not
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Turn the slider into a range slider.
+	*/
 	twoHandles: prop_types.default.bool
 };
 //#endregion

package/lib/components/Slider/Slider.js

@@ -16,10 +16,10 @@ const require_Tooltip = require("../Tooltip/Tooltip.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_clamp = require("../../internal/clamp.js");
 const require_SliderHandles = require("./SliderHandles.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -830,38 +830,142 @@ const Slider = (props) => {
 	});
 };
 Slider.propTypes = {
+	/**
+	* The `ariaLabel` for the `<input>`.
+	*/
 	ariaLabelInput: prop_types.default.string,
+	/**
+	* The child nodes.
+	*/
 	children: prop_types.default.node,
+	/**
+	* The CSS class name for the slider.
+	*/
 	className: prop_types.default.string,
+	/**
+	* `true` to disable this slider.
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* The callback to format the label associated with the minimum/maximum value.
+	*/
 	formatLabel: prop_types.default.func,
+	/**
+	* `true` to hide the number input box.
+	*/
 	hideTextInput: prop_types.default.bool,
+	/**
+	* The ID of the `<input>`.
+	*/
 	id: prop_types.default.string,
+	/**
+	* The `type` attribute of the `<input>`.
+	*/
 	inputType: prop_types.default.string,
+	/**
+	* `Specify whether the Slider is currently invalid
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the Slider is in an invalid state
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* The label for the slider.
+	*/
 	labelText: prop_types.default.node,
+	/**
+	* Specify whether you want the underlying label to be visually hidden
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* `true` to use the light version.
+	*/
 	light: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number.isRequired,
+	/**
+	* The label associated with the maximum value.
+	*/
 	maxLabel: prop_types.default.string,
+	/**
+	* The minimum value.
+	*/
 	min: prop_types.default.number.isRequired,
+	/**
+	* The label associated with the minimum value.
+	*/
 	minLabel: prop_types.default.string,
+	/**
+	* The `name` attribute of the `<input>`.
+	*/
 	name: prop_types.default.string,
+	/**
+	* Provide an optional function to be called when the input element
+	* loses focus
+	*/
 	onBlur: prop_types.default.func,
+	/**
+	* The callback to get notified of change in value.
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when a key is pressed in the number input.
+	*/
 	onInputKeyUp: prop_types.default.func,
+	/**
+	* The callback to get notified of value on handle release.
+	*/
 	onRelease: prop_types.default.func,
+	/**
+	* Whether the slider should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* `true` to specify if the control is required.
+	*/
 	required: prop_types.default.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: prop_types.default.number,
+	/**
+	* A value determining how much the value should increase/decrease by Shift+arrow keys,
+	* which will be `(max - min) / stepMultiplier`.
+	*/
 	stepMultiplier: prop_types.default.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: prop_types.default.func,
+	/**
+	* The `ariaLabel` for the upper bound `<input>` when there are two handles.
+	*/
 	unstable_ariaLabelInputUpper: prop_types.default.string,
+	/**
+	* The `name` attribute of the upper bound `<input>` when there are two handles.
+	*/
 	unstable_nameUpper: prop_types.default.string,
+	/**
+	* The upper bound when there are two handles.
+	*/
 	unstable_valueUpper: prop_types.default.number,
+	/**
+	* The value of the slider. When there are two handles, value is the lower
+	* bound.
+	*/
 	value: prop_types.default.number.isRequired,
+	/**
+	* Specify whether the Slider is in a warning state.
+	*/
 	warn: prop_types.default.bool,
+	/**
+	* Provide the text displayed when the Slider is in a warning state.
+	*/
 	warnText: prop_types.default.node
 };
 //#endregion

package/lib/components/Stack/Stack.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -61,10 +61,30 @@ const Stack = (0, react.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: prop_types.default.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: prop_types.default.node,
+	/**
+	* Provide a custom class name to be used by the outermost element rendered by
+	* Stack
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide either a custom value or a step from the spacing scale to be used
+	* as the gap in the layout
+	*/
 	gap: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.oneOf(SPACING_STEPS)]),
+	/**
+	* Specify the orientation of them items in the Stack
+	*/
 	orientation: prop_types.default.oneOf(["horizontal", "vertical"])
 };
 //#endregion

package/lib/components/StructuredList/StructuredList.Skeleton.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -61,7 +61,13 @@ function StructuredListSkeleton({ rowCount = 5, className, ...rest }) {
 	});
 }
 StructuredListSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* number of table rows
+	*/
 	rowCount: prop_types.default.number
 };
 //#endregion