@carbon/react 1.110.0 → 1.111.0-rc.0

package/es/components/FluidTextInput/FluidPasswordInput.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import PasswordInput from "../TextInput/PasswordInput.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidTextInput/FluidPasswordInput.tsx
@@ -30,23 +30,81 @@ const FluidPasswordInput = ({ className, ...other }) => {
 	});
 };
 FluidPasswordInput.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: 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,
+	/**
+	* "Hide password" tooltip text on password visibility toggle
+	*/
 	hidePasswordLabel: PropTypes.string,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	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,
+	/**
+	* Specify whether the control is a password input
+	*/
 	isPassword: PropTypes.bool,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* 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,
+	/**
+	* Callback function that is called whenever the toggle password visibility
+	* button is clicked
+	*/
 	onTogglePasswordVisibility: 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 value of the `<input>`
+	*/
 	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,
+	/**
+	* Whether or not the component is readonly
+	*/
 	readOnly: PropTypes.bool
 };
 //#endregion

package/es/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FluidTextInput/FluidTextInput.Skeleton.tsx
@@ -29,6 +29,10 @@ const FluidTextInputSkeleton = ({ className, ...other }) => {
 		})
 	});
 };
-FluidTextInputSkeleton.propTypes = { className: PropTypes.string };
+FluidTextInputSkeleton.propTypes = { 
+/**
+* Specify an optional className to be applied to the outer FluidForm wrapper
+*/
+className: PropTypes.string };
 //#endregion
 export { FluidTextInputSkeleton as default };

package/es/components/FluidTextInput/FluidTextInput.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import PasswordInput from "../TextInput/PasswordInput.js";
 import TextInput_default from "../TextInput/index.js";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidTextInput/FluidTextInput.tsx
@@ -36,22 +36,76 @@ const FluidTextInput = React.forwardRef(({ className, isPassword, ...other }, re
 	});
 });
 FluidTextInput.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: 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.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,
+	/**
+	* Specify whether the control is a password input
+	*/
 	isPassword: PropTypes.bool,
+	/**
+	* Max character count allowed for the textInput. This is needed in order for enableCounter to display
+	*/
 	maxCount: PropTypes.number,
+	/**
+	* Specify whether to display the character counter
+	*/
 	enableCounter: PropTypes.bool,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* 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,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	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,
+	/**
+	* Whether or not the component is readonly
+	*/
 	readOnly: PropTypes.bool
 };
 //#endregion

package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import FluidSelectSkeleton from "../FluidSelect/FluidSelect.Skeleton.js";
 import FluidTextInputSkeleton from "../FluidTextInput/FluidTextInput.Skeleton.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FluidTimePicker/FluidTimePicker.Skeleton.tsx
@@ -32,7 +32,13 @@ const FluidTimePickerSkeleton = ({ className, isOnlyTwo, ...rest }) => {
 	});
 };
 FluidTimePickerSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify if there are only two TimePicker elements
+	*/
 	isOnlyTwo: PropTypes.bool
 };
 //#endregion

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { isComponentElement } from "../../internal/utils.js";
 import FluidTextInput_default from "../FluidTextInput/index.js";
 import FluidTimePickerSelect_default from "../FluidTimePickerSelect/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 { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -65,14 +65,42 @@ const FluidTimePicker = React.forwardRef(({ className, children, disabled, inval
 	});
 });
 FluidTimePicker.propTypes = {
+	/**
+	* The child node(s)
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the outer FluidTimePicker wrapper
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether or not the control is invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in error state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* 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,
+	/**
+	* Whether or not the component is readonly
+	*/
 	readOnly: PropTypes.bool
 };
 //#endregion

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -25,13 +25,39 @@ const FluidTimePickerSelect = React.forwardRef(({ children, className, ...other
 	});
 });
 FluidTimePickerSelect.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,
+	/**
+	* Optionally provide the default value of the `<select>`
+	*/
 	defaultValue: PropTypes.any,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<select>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Provide label text to be read by screen readers when interacting with the
+	* control
+	*/
 	labelText: PropTypes.node,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Whether the component is read-only.
+	*/
 	readOnly: PropTypes.bool
 };
 //#endregion

package/es/components/Form/Form.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/Form/Form.tsx
@@ -25,7 +25,13 @@ function Form({ className, children, ...other }) {
 	});
 }
 Form.propTypes = {
+	/**
+	* Provide children to be rendered inside of the <form> element
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied on the containing <form> node
+	*/
 	className: PropTypes.string
 };
 //#endregion

package/es/components/FormGroup/FormGroup.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/FormGroup/FormGroup.tsx
@@ -41,13 +41,38 @@ const FormGroup = ({ disabled = false, legendId, legendText, invalid = false, ch
 	});
 };
 FormGroup.propTypes = {
+	/**
+	* Provide the children form elements to be rendered inside of the <fieldset>
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied to the containing <fieldset> node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the FormGroup should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the <FormGroup> is invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide id for the fieldset <legend> which corresponds to the fieldset
+	* `aria-labelledby`
+	*/
 	legendId: PropTypes.node,
+	/**
+	* Provide the text to be rendered inside of the fieldset <legend>
+	*/
 	legendText: PropTypes.node.isRequired,
+	/**
+	* Specify whether the message should be displayed in the <FormGroup>
+	*/
 	message: PropTypes.bool,
+	/**
+	* Provide the text for the message in the <FormGroup>
+	*/
 	messageText: PropTypes.string
 };
 //#endregion

package/es/components/FormItem/FormItem.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/FormItem/FormItem.tsx
@@ -25,7 +25,13 @@ function FormItem({ className, children, ...rest }) {
 	});
 }
 FormItem.propTypes = {
+	/**
+	* Provide content to be rendered in the form item
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied to the containing node
+	*/
 	className: PropTypes.string
 };
 //#endregion

package/es/components/FormLabel/FormLabel.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FormLabel/FormLabel.tsx
@@ -29,8 +29,17 @@ function FormLabel({ className: customClassName, children, id, ...rest }) {
 	});
 }
 FormLabel.propTypes = {
+	/**
+	* Specify the content of the form label
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide a custom className to be applied to the containing <label> node
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide a unique id for the given <FormLabel>
+	*/
 	id: PropTypes.string
 };
 //#endregion

package/es/components/Grid/CSSGrid.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { GridSettings, useGridSettings } from "./GridContext.js";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/CSSGrid.tsx
@@ -58,17 +58,44 @@ const CSSGrid = React.forwardRef(({ align, as, children, className: customClassN
 	});
 });
 CSSGrid.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Specify grid alignment. Default is center
+	*/
 	align: PropTypes.oneOf([
 		"start",
 		"center",
 		"end"
 	]),
+	/**
+	* Pass in content that will be rendered within the `Grid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Grid`
+	*/
 	className: PropTypes.string,
+	/**
+	* Collapse the gutter to 1px. Useful for fluid layouts.
+	* Rows have 1px of margin between them to match gutter.
+	*/
 	condensed: PropTypes.bool,
+	/**
+	* Remove the default max width that the grid has set
+	*/
 	fullWidth: PropTypes.bool,
+	/**
+	* Container hangs 16px into the gutter. Useful for
+	* typographic alignment with and without containers.
+	*/
 	narrow: PropTypes.bool,
+	/**
+	* Add a row gap to the grid that matches the current gutter size.
+	* This is useful when you want consistent vertical spacing between rows.
+	*/
 	withRowGap: PropTypes.bool
 };
 const Subgrid = React.forwardRef(({ as, className: customClassName, children, mode, withRowGap, ...rest }, ref) => {
@@ -88,14 +115,30 @@ const Subgrid = React.forwardRef(({ as, className: customClassName, children, mo
 	});
 });
 Subgrid.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Subgrid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Subgrid`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the gutter mode for the subgrid
+	*/
 	mode: PropTypes.oneOf([
 		"wide",
 		"narrow",
 		"condensed"
 	]),
+	/**
+	* Add a row gap to the grid that matches the current gutter size.
+	* This is useful when you want consistent vertical spacing between rows.
+	*/
 	withRowGap: PropTypes.bool
 };
 const CSSGridComponent = CSSGrid;

package/es/components/Grid/Column.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useGridSettings } from "./GridContext.js";
 import { enabled } from "@carbon/feature-flags";
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/Column.tsx
@@ -74,14 +74,57 @@ const spanPropType = enabled("enable-css-grid") ? PropTypes.oneOfType([
 	})
 ]);
 Column.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Column`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Column`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+	* This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	lg: spanPropType,
+	/**
+	* Specify column span for the `max` breakpoint. This breakpoint supports 16
+	* columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	max: spanPropType,
+	/**
+	* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+	* This breakpoint supports 8 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	md: spanPropType,
+	/**
+	* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+	* This breakpoint supports 4 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	sm: spanPropType,
+	/**
+	* Specify constant column span, start, or end values that will not change
+	* based on breakpoint
+	*/
 	span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
+	/**
+	* Specify column span for the `xlg` breakpoint (Default breakpoint up to
+	* 1584px) This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	xlg: spanPropType
 };
 const CSSGridColumn = React.forwardRef(({ as: BaseComponent = "div", children, className: containerClassName, sm, md, lg, xlg, max, span, ...rest }, ref) => {
@@ -100,13 +143,50 @@ const CSSGridColumn = React.forwardRef(({ as: BaseComponent = "div", children, c
 	});
 });
 CSSGridColumn.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Column`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Column`
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+	* This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	lg: spanPropType,
+	/**
+	* Specify column span for the `max` breakpoint. This breakpoint supports 16
+	* columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	max: spanPropType,
+	/**
+	* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+	* This breakpoint supports 8 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	md: spanPropType,
+	/**
+	* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+	* This breakpoint supports 4 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	sm: spanPropType,
+	/**
+	* Specify constant column span, start,  or end values that will not change
+	* based on breakpoint
+	*/
 	span: PropTypes.oneOfType([
 		PropTypes.number,
 		percentSpanType,
@@ -116,6 +196,12 @@ CSSGridColumn.propTypes = {
 			end: PropTypes.number
 		})
 	]),
+	/**
+	* Specify column span for the `xlg` breakpoint (Default breakpoint up to
+	* 1584px) This breakpoint supports 16 columns by default.
+	*
+	* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
+	*/
 	xlg: spanPropType
 };
 const breakpointNames = [

package/es/components/Grid/ColumnHang.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/Grid/ColumnHang.tsx
@@ -30,8 +30,17 @@ function ColumnHang({ as: BaseComponent = "div", className: customClassName, chi
 	});
 }
 ColumnHang.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default <div>
+	*/
 	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/**
+	* Pass in content that will be rendered within the `Grid`
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify a custom className to be applied to the `Grid`
+	*/
 	className: PropTypes.string
 };
 const ColumnHangComponent = ColumnHang;