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

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -135,18 +135,60 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 	});
 }
 FileUploaderDropContainer.propTypes = {
+	/**
+	* Specify the types of files that this input should be able to receive
+	*/
 	accept: PropTypes.arrayOf(PropTypes.string),
+	/**
+	* Provide a custom className to be applied to the container node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether file input is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide a unique id for the underlying `<input>` node
+	*/
 	id: PropTypes.string,
+	/**
+	* Provide the label text to be read by screen readers when interacting with
+	* this control
+	*/
 	labelText: PropTypes.string.isRequired,
+	/**
+	* Maximum file size allowed in bytes. Files larger than this will be marked invalid
+	*/
 	maxFileSize: PropTypes.number,
+	/**
+	* Specify if the component should accept multiple files to upload
+	*/
 	multiple: PropTypes.bool,
+	/**
+	* Provide a name for the underlying `<input>` node
+	*/
 	name: PropTypes.string,
+	/**
+	* Event handler that is called after files are added to the uploader
+	* The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+	*/
 	onAddFiles: PropTypes.func,
+	/**
+	* Provide an optional function to be called when the button element
+	* is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Provide a custom regex pattern for the acceptedTypes
+	*/
 	pattern: PropTypes.string,
+	/**
+	* Provide an accessibility role for the `<FileUploaderButton>`
+	*/
 	role: deprecate(PropTypes.number, "The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button."),
+	/**
+	* Provide a custom tabIndex value for the `<FileUploaderButton>`
+	*/
 	tabIndex: deprecate(PropTypes.number, "The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.")
 };
 //#endregion

package/es/components/FileUploader/FileUploaderItem.js

@@ -127,22 +127,51 @@ function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, o
 	});
 }
 FileUploaderItem.propTypes = {
+	/**
+	* Error message body for an invalid file upload
+	*/
 	errorBody: PropTypes.string,
+	/**
+	* Error message subject for an invalid file upload
+	*/
 	errorSubject: PropTypes.string,
+	/**
+	* Description of status icon (displayed in native tooltip)
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Specify if the currently uploaded file is invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Name of the uploaded file
+	*/
 	name: PropTypes.string,
+	/**
+	* Event handler that is called after removing a file from the file uploader
+	* The event handler signature looks like `onDelete(evt, { uuid })`
+	*/
 	onDelete: PropTypes.func,
+	/**
+	* Specify the size of the FileUploaderButton, from a list of available
+	* sizes.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Status of the file upload
+	*/
 	status: PropTypes.oneOf([
 		"uploading",
 		"edit",
 		"complete"
 	]),
+	/**
+	* Unique identifier for the file object
+	*/
 	uuid: PropTypes.string
 };
 //#endregion

package/es/components/FileUploader/Filename.js

@@ -48,15 +48,33 @@ function Filename({ iconDescription = "Uploading file", status = "uploading", in
 	}
 }
 Filename.propTypes = {
+	/**
+	* Specify an id that describes the error to be read by screen readers when the filename is invalid
+	*/
 	["aria-describedby"]: PropTypes.string,
+	/**
+	* Provide a description of the SVG icon to denote file upload status
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Specify if the file is invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Name of the uploaded file
+	*/
 	name: PropTypes.string,
+	/**
+	* Status of the file upload
+	*/
 	status: PropTypes.oneOf([
 		"edit",
 		"complete",
 		"uploading"
 	]),
+	/**
+	* Provide a custom tabIndex value for the `<Filename>`
+	*/
 	tabIndex: PropTypes.number
 };
 //#endregion

package/es/components/FluidComboBox/FluidComboBox.Skeleton.js

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

package/es/components/FluidComboBox/FluidComboBox.js

@@ -32,31 +32,92 @@ const FluidComboBox = React.forwardRef(function FluidComboBox({ className, isCon
 	});
 });
 FluidComboBox.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the direction of the dropdown. Can be either top or bottom.
+	*/
 	direction: PropTypes.oneOf(["top", "bottom"]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+	* from their collection that are pre-selected
+	*/
 	initialSelectedItem: PropTypes.oneOfType([
 		PropTypes.object,
 		PropTypes.string,
 		PropTypes.number
 	]),
+	/**
+	* Specify if the currently selected value is invalid.
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Specify if the `FluidComboBox` should render its menu items in condensed mode
+	*/
 	isCondensed: PropTypes.bool,
+	/**
+	* Renders an item as a custom React node instead of a string.
+	*/
 	itemToElement: PropTypes.func,
+	/**
+	* Helper function passed to downshift that allows the library to render a
+	* given item to a string label. By default, it extracts the `label` field
+	* from a given item to serve as the item label in the list.
+	*/
 	itemToString: PropTypes.func,
+	/**
+	* We try to stay as generic as possible here to allow individuals to pass
+	* in a collection of whatever kind of data structure they prefer
+	*/
 	items: PropTypes.array.isRequired,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: PropTypes.node.isRequired,
+	/**
+	* `onChange` is a utility for this controlled component to communicate to a
+	* consuming component what kind of internal state changes are occurring.
+	*/
 	onChange: PropTypes.func.isRequired,
+	/**
+	* In the case you want to control the dropdown selection entirely.
+	*/
 	selectedItem: PropTypes.oneOfType([
 		PropTypes.object,
 		PropTypes.string,
 		PropTypes.number
 	]),
+	/**
+	* Provide the title text that will be read by a screen reader when
+	* visiting this control
+	*/
 	titleText: PropTypes.node,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: 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
 };
 //#endregion

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -54,7 +54,13 @@ const FluidDatePickerSkeleton = ({ className, datePickerType = "single", ...othe
 	});
 };
 FluidDatePickerSkeleton.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify which variant of the DatePicker the skeleton should mimic
+	*/
 	datePickerType: PropTypes.oneOf([
 		"simple",
 		"single",

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -41,12 +41,33 @@ const FluidDatePicker = React.forwardRef(function FluidDatePicker({ className, c
 	});
 });
 FluidDatePicker.propTypes = {
+	/**
+	* The child node(s)
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: PropTypes.string,
+	/**
+	* 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,
+	/**
+	* Whether the input should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* 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/FluidDropdown/FluidDropdown.Skeleton.js

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

package/es/components/FluidDropdown/FluidDropdown.js

@@ -32,32 +32,97 @@ const FluidDropdown = React.forwardRef(function FluidDropdown({ className, isCon
 	});
 });
 FluidDropdown.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the direction of the dropdown. Can be either top or bottom.
+	*/
 	direction: PropTypes.oneOf(["top", "bottom"]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+	* from their collection that are pre-selected
+	*/
 	initialSelectedItem: PropTypes.oneOfType([
 		PropTypes.object,
 		PropTypes.string,
 		PropTypes.number
 	]),
+	/**
+	* Specify if the currently selected value is invalid.
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Specify if the `FluidDropdown` should render its menu items in condensed mode
+	*/
 	isCondensed: PropTypes.bool,
+	/**
+	* Renders an item as a custom React node instead of a string.
+	*/
 	itemToElement: PropTypes.func,
+	/**
+	* Helper function passed to downshift that allows the library to render a
+	* given item to a string label. By default, it extracts the `label` field
+	* from a given item to serve as the item label in the list.
+	*/
 	itemToString: PropTypes.func,
+	/**
+	* We try to stay as generic as possible here to allow individuals to pass
+	* in a collection of whatever kind of data structure they prefer
+	*/
 	items: PropTypes.array.isRequired,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: PropTypes.node.isRequired,
+	/**
+	* `onChange` is a utility for this controlled component to communicate to a
+	* consuming component what kind of internal state changes are occurring.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* An optional callback to render the currently selected item as a react element instead of only
+	* as a string.
+	*/
 	renderSelectedItem: PropTypes.func,
+	/**
+	* In the case you want to control the dropdown selection entirely.
+	*/
 	selectedItem: PropTypes.oneOfType([
 		PropTypes.object,
 		PropTypes.string,
 		PropTypes.number
 	]),
+	/**
+	* Provide the title text that will be read by a screen reader when
+	* visiting this control
+	*/
 	titleText: PropTypes.node,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: 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
 };
 //#endregion

package/es/components/FluidForm/FluidForm.js

@@ -31,7 +31,13 @@ const FluidForm = ({ className, children, ...other }) => {
 	});
 };
 FluidForm.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/FluidMultiSelect/FluidMultiSelect.Skeleton.js

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

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -37,39 +37,167 @@ const FluidMultiSelect = React.forwardRef(function FluidMultiSelect({ className,
 	});
 });
 FluidMultiSelect.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the text that should be read for screen readers that describes total items selected
+	*/
 	clearSelectionDescription: PropTypes.string,
+	/**
+	* Specify the text that should be read for screen readers to clear selection.
+	*/
 	clearSelectionText: PropTypes.string,
+	/**
+	* Provide a compare function that is used to determine the ordering of
+	* options. See 'sortItems' for more control. Consider declaring function
+	* with `useCallback` to prevent unnecessary re-renders.
+	*/
 	compareItems: PropTypes.func,
+	/**
+	* Specify the direction of the multiselect dropdown. Can be either top or bottom.
+	*/
 	direction: PropTypes.oneOf(["top", "bottom"]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Additional props passed to Downshift.
+	*
+	* **Use with caution:** anything you define here overrides the components'
+	* internal handling of that prop. Downshift APIs and internals are subject to
+	* change, and in some cases they can not be shimmed by Carbon to shield you
+	* from potentially breaking changes.
+	*/
 	downshiftProps: PropTypes.object,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Allow users to pass in arbitrary items from their collection that are
+	* pre-selected
+	*/
 	initialSelectedItems: PropTypes.array,
+	/**
+	* Specify if the currently selected value is invalid.
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+	*/
 	isCondensed: PropTypes.bool,
+	/**
+	* Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+	*/
 	isFilterable: PropTypes.bool,
+	/**
+	* Renders an item as a custom React node instead of a string.
+	*/
 	itemToElement: PropTypes.func,
+	/**
+	* Helper function passed to downshift that allows the library to render a
+	* given item to a string label. By default, it extracts the `label` field
+	* from a given item to serve as the item label in the list. Consider
+	* declaring function with `useCallback` to prevent unnecessary re-renders.
+	*/
 	itemToString: PropTypes.func,
+	/**
+	* We try to stay as generic as possible here to allow individuals to pass
+	* in a collection of whatever kind of data structure they prefer
+	*/
 	items: PropTypes.array.isRequired,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: PropTypes.node.isRequired,
+	/**
+	* Specify the locale of the control. Used for the default `compareItems`
+	* used for sorting the list of items in the control.
+	*/
 	locale: PropTypes.string,
+	/**
+	* `onChange` is a utility for this controlled component to communicate to a
+	* consuming component what kind of internal state changes are occurring.
+	*/
 	onChange: PropTypes.func,
+	/**
+	* **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+	* the currently typed input.
+	*/
 	onInputValueChange: PropTypes.func,
+	/**
+	* `onMenuChange` is a utility for this controlled component to communicate to a
+	* consuming component that the menu was open(`true`)/closed(`false`).
+	*/
 	onMenuChange: PropTypes.func,
+	/**
+	* Whether or not the Multiselect is readonly
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* For full control of the selected items
+	*/
 	selectedItems: PropTypes.array,
+	/**
+	* Specify feedback (mode) of the selection.
+	* `top`: selected item jumps to top
+	* `fixed`: selected item stays at it's position
+	* `top-after-reopen`: selected item jump to top after reopen dropdown
+	*/
 	selectionFeedback: PropTypes.oneOf([
 		"top",
 		"fixed",
 		"top-after-reopen"
 	]),
+	/**
+	* Provide a method that sorts all options in the control. Overriding this
+	* prop means that you also have to handle the sort logic for selected versus
+	* un-selected items. If you just want to control ordering, consider the
+	* `compareItems` prop instead.
+	*
+	* The return value should be a number whose sign indicates the relative order
+	* of the two elements: negative if a is less than b, positive if a is greater
+	* than b, and zero if they are equal.
+	*
+	* sortItems :
+	*   (items: Array<Item>, {
+	*     selectedItems: Array<Item>,
+	*     itemToString: Item => string,
+	*     compareItems: (itemA: string, itemB: string, {
+	*       locale: string
+	*     }) => number,
+	*     locale: string,
+	*   }) => Array<Item>
+	*/
 	sortItems: PropTypes.func,
+	/**
+	* Provide the title text that will be read by a screen reader when
+	* visiting this control
+	*/
 	titleText: PropTypes.node,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func,
+	/**
+	* Specify title to show title on hover
+	*/
 	useTitleInItem: PropTypes.bool,
+	/**
+	* 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/FluidNumberInput/FluidNumberInput.Skeleton.js

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