@carbon/react 1.110.0-rc.0 → 1.111.0-rc.0

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -32,14 +32,47 @@ const FluidNumberInput = React.forwardRef(({ className, ...other }, ref) => {
 	});
 });
 FluidNumberInput.propTypes = {
+	/**
+	* `true` to allow empty string.
+	*/
 	allowEmpty: PropTypes.bool,
+	/**
+	* Specify an optional className to be applied to the wrapper node
+	*/
 	className: PropTypes.string,
+	/**
+	* Optional starting value for uncontrolled state
+	*/
 	defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	/**
+	* Specify if the wheel functionality for the input should be disabled, or not
+	*/
 	disableWheel: PropTypes.bool,
+	/**
+	* Specify if the control should be disabled, or not
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* **Experimental:** Specify Intl.NumberFormat options applied to internal
+	* number parsing and formatting. Use with `type="text"`, has no effect when
+	* `type="number"`.
+	* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+	*/
 	formatOptions: NumberFormatOptionsPropType,
+	/**
+	* Provide a description for up/down icons that can be read by screen readers
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Specify a custom `id` for the input
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Instruct the browser which keyboard to display on mobile devices. Defaults
+	* to `decimal`, but note that standard numeric keyboards vary across devices
+	* and operating systems.
+	* @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
+	*/
 	inputMode: PropTypes.oneOf([
 		"none",
 		"text",
@@ -50,22 +83,84 @@ FluidNumberInput.propTypes = {
 		"decimal",
 		"search"
 	]),
+	/**
+	* Specify if the currently value is invalid.
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Message which is displayed if the value is invalid.
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: PropTypes.node,
+	/**
+	* **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
+	* language code for parsing and formatting. Use with `type="text"`, has no
+	* effect when `type="number"`.
+	*/
 	locale: PropTypes.string,
+	/**
+	* The maximum value.
+	*/
 	max: PropTypes.number,
+	/**
+	* The minimum value.
+	*/
 	min: PropTypes.number,
+	/**
+	* Provide an optional handler that is called when the internal state of
+	* NumberInput changes. This handler is called with event and state info.
+	* When type="number", this is called on every change of the input.
+	* When type="text", this is only called on blur after the number has been
+	* parsed and formatted.
+	* `(event, { value, direction }) => void`
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide an optional function to be called when the up/down button is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Provide an optional function to be called when a key is pressed in the number input
+	*/
 	onKeyUp: PropTypes.func,
+	/**
+	* When type="text", provide an optional pattern to restrict user input. Has
+	* no effect when type="number".
+	*/
 	pattern: PropTypes.string,
+	/**
+	* Specify how much the values should increase/decrease upon clicking on up/down button
+	*/
 	step: PropTypes.number,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func,
+	/**
+	* **Experimental**: Specify if the input should be of type text or number.
+	* Use type="text" with `locale`, `formatOptions`, and guide user input with
+	* `pattern` and `inputMode`.
+	*/
 	type: PropTypes.oneOf(["number", "text"]),
+	/**
+	* Specify the value of the input
+	*/
 	value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	/**
+	* 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/FluidSearch/FluidSearch.Skeleton.js

@@ -29,6 +29,10 @@ const FluidSearchSkeleton = ({ className, ...other }) => {
 		})
 	});
 };
-FluidSearchSkeleton.propTypes = { className: PropTypes.string };
+FluidSearchSkeleton.propTypes = { 
+/**
+* Specify an optional className to be applied to the outer FluidForm wrapper
+*/
+className: PropTypes.string };
 //#endregion
 export { FluidSearchSkeleton as default };

package/es/components/FluidSearch/FluidSearch.js

@@ -31,19 +31,64 @@ const FluidSearch = forwardRef(({ className, ...other }, ref) => {
 	});
 });
 FluidSearch.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,
+	/**
+	* Provide the label text for the Search icon
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* Optional callback called when the search value changes.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: 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,
+	/**
+	* Specify the role for the underlying `<input>`, defaults to `searchbox`
+	*/
 	role: PropTypes.string,
+	/**
+	* Optional prop to specify the type of the `<input>`
+	*/
 	type: PropTypes.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 //#endregion

package/es/components/FluidSelect/FluidSelect.Skeleton.js

@@ -28,6 +28,10 @@ const FluidSelectSkeleton = ({ className, ...rest }) => {
 		})
 	});
 };
-FluidSelectSkeleton.propTypes = { className: PropTypes.string };
+FluidSelectSkeleton.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: PropTypes.string };
 //#endregion
 export { FluidSelectSkeleton as default };

package/es/components/FluidSelect/FluidSelect.js

@@ -32,17 +32,55 @@ const FluidSelect = React.forwardRef(({ className, children, ...other }, ref) =>
 	});
 });
 FluidSelect.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,
+	/**
+	* 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,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: PropTypes.func,
+	/**
+	* 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/FluidTextArea/FluidTextArea.Skeleton.js

@@ -29,6 +29,10 @@ const FluidTextAreaSkeleton = ({ className, ...other }) => {
 		})
 	});
 };
-FluidTextAreaSkeleton.propTypes = { className: PropTypes.string };
+FluidTextAreaSkeleton.propTypes = { 
+/**
+* Specify an optional className to be applied to the outer FluidForm wrapper
+*/
+className: PropTypes.string };
 //#endregion
 export { FluidTextAreaSkeleton as default };

package/es/components/FluidTextArea/FluidTextArea.js

@@ -31,26 +31,93 @@ const FluidTextArea = ({ className, ...other }) => {
 	});
 };
 FluidTextArea.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,
+	/**
+	* 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 character 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 `FluidTextArea` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Max character 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,
+	/**
+	* Specify the placeholder attribute for the `<textarea>`
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* Specify the rows attribute for the `<textarea>`
+	*/
 	rows: PropTypes.number,
+	/**
+	* 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,
+	/**
+	* Whether or not the component is readonly
+	*/
 	readOnly: PropTypes.bool
 };
 //#endregion

package/es/components/FluidTextInput/FluidPasswordInput.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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