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

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -36,32 +36,97 @@ const FluidDropdown = react.default.forwardRef(function FluidDropdown({ classNam
 	});
 });
 FluidDropdown.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the direction of the dropdown. Can be either top or bottom.
+	*/
 	direction: prop_types.default.oneOf(["top", "bottom"]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: prop_types.default.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: prop_types.default.oneOfType([
 		prop_types.default.object,
 		prop_types.default.string,
 		prop_types.default.number
 	]),
+	/**
+	* Specify if the currently selected value is invalid.
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Specify if the `FluidDropdown` should render its menu items in condensed mode
+	*/
 	isCondensed: prop_types.default.bool,
+	/**
+	* Renders an item as a custom React node instead of a string.
+	*/
 	itemToElement: prop_types.default.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: prop_types.default.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: prop_types.default.array.isRequired,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: prop_types.default.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: prop_types.default.func,
+	/**
+	* An optional callback to render the currently selected item as a react element instead of only
+	* as a string.
+	*/
 	renderSelectedItem: prop_types.default.func,
+	/**
+	* In the case you want to control the dropdown selection entirely.
+	*/
 	selectedItem: prop_types.default.oneOfType([
 		prop_types.default.object,
 		prop_types.default.string,
 		prop_types.default.number
 	]),
+	/**
+	* Provide the title text that will be read by a screen reader when
+	* visiting this control
+	*/
 	titleText: prop_types.default.node,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.func,
+	/**
+	* 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/FluidForm/FluidForm.js

@@ -35,7 +35,13 @@ const FluidForm = ({ className, children, ...other }) => {
 	});
 };
 FluidForm.propTypes = {
+	/**
+	* Provide children to be rendered inside of the <form> element
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom className to be applied on the containing <form> node
+	*/
 	className: prop_types.default.string
 };
 //#endregion

package/lib/components/FluidForm/FormContext.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-require("../../_virtual/_rolldown/runtime.js");
 //#region src/components/FluidForm/FormContext.ts
 /**
 * Copyright IBM Corp. 2016, 2023

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

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

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -41,39 +41,167 @@ const FluidMultiSelect = react.default.forwardRef(function FluidMultiSelect({ cl
 	});
 });
 FluidMultiSelect.propTypes = {
+	/**
+	* Specify an optional className to be applied to the outer FluidForm wrapper
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the text that should be read for screen readers that describes total items selected
+	*/
 	clearSelectionDescription: prop_types.default.string,
+	/**
+	* Specify the text that should be read for screen readers to clear selection.
+	*/
 	clearSelectionText: prop_types.default.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: prop_types.default.func,
+	/**
+	* Specify the direction of the multiselect dropdown. Can be either top or bottom.
+	*/
 	direction: prop_types.default.oneOf(["top", "bottom"]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: prop_types.default.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: prop_types.default.object,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Allow users to pass in arbitrary items from their collection that are
+	* pre-selected
+	*/
 	initialSelectedItems: prop_types.default.array,
+	/**
+	* Specify if the currently selected value is invalid.
+	*/
 	invalid: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the control is in an invalid state
+	*/
 	invalidText: prop_types.default.node,
+	/**
+	* Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+	*/
 	isCondensed: prop_types.default.bool,
+	/**
+	* Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+	*/
 	isFilterable: prop_types.default.bool,
+	/**
+	* Renders an item as a custom React node instead of a string.
+	*/
 	itemToElement: prop_types.default.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: prop_types.default.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: prop_types.default.array.isRequired,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: prop_types.default.node.isRequired,
+	/**
+	* Specify the locale of the control. Used for the default `compareItems`
+	* used for sorting the list of items in the control.
+	*/
 	locale: prop_types.default.string,
+	/**
+	* `onChange` is a utility for this controlled component to communicate to a
+	* consuming component what kind of internal state changes are occurring.
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+	* the currently typed input.
+	*/
 	onInputValueChange: prop_types.default.func,
+	/**
+	* `onMenuChange` is a utility for this controlled component to communicate to a
+	* consuming component that the menu was open(`true`)/closed(`false`).
+	*/
 	onMenuChange: prop_types.default.func,
+	/**
+	* Whether or not the Multiselect is readonly
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* For full control of the selected items
+	*/
 	selectedItems: prop_types.default.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: prop_types.default.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: prop_types.default.func,
+	/**
+	* Provide the title text that will be read by a screen reader when
+	* visiting this control
+	*/
 	titleText: prop_types.default.node,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.func,
+	/**
+	* Specify title to show title on hover
+	*/
 	useTitleInItem: prop_types.default.bool,
+	/**
+	* 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/FluidNumberInput/FluidNumberInput.Skeleton.js

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

package/lib/components/FluidNumberInput/FluidNumberInput.js

@@ -36,14 +36,47 @@ const FluidNumberInput = react.default.forwardRef(({ className, ...other }, ref)
 	});
 });
 FluidNumberInput.propTypes = {
+	/**
+	* `true` to allow empty string.
+	*/
 	allowEmpty: prop_types.default.bool,
+	/**
+	* Specify an optional className to be applied to the wrapper node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Optional starting value for uncontrolled state
+	*/
 	defaultValue: prop_types.default.oneOfType([prop_types.default.number, prop_types.default.string]),
+	/**
+	* Specify if the wheel functionality for the input should be disabled, or not
+	*/
 	disableWheel: prop_types.default.bool,
+	/**
+	* Specify if the control should be disabled, or not
+	*/
 	disabled: prop_types.default.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: require_NumberFormatPropTypes.NumberFormatOptionsPropType,
+	/**
+	* Provide a description for up/down icons that can be read by screen readers
+	*/
 	iconDescription: prop_types.default.string,
+	/**
+	* Specify a custom `id` for the input
+	*/
 	id: prop_types.default.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: prop_types.default.oneOf([
 		"none",
 		"text",
@@ -54,22 +87,84 @@ FluidNumberInput.propTypes = {
 		"decimal",
 		"search"
 	]),
+	/**
+	* 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,
+	/**
+	* Generic `label` that will be used as the textual representation of what
+	* this field is for
+	*/
 	label: prop_types.default.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: prop_types.default.string,
+	/**
+	* The maximum value.
+	*/
 	max: prop_types.default.number,
+	/**
+	* The minimum value.
+	*/
 	min: prop_types.default.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: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when the up/down button is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when a key is pressed in the number input
+	*/
 	onKeyUp: prop_types.default.func,
+	/**
+	* When type="text", provide an optional pattern to restrict user input. Has
+	* no effect when type="number".
+	*/
 	pattern: prop_types.default.string,
+	/**
+	* Specify how much the values should increase/decrease upon clicking on up/down button
+	*/
 	step: prop_types.default.number,
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: prop_types.default.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: prop_types.default.oneOf(["number", "text"]),
+	/**
+	* Specify the value of the input
+	*/
 	value: prop_types.default.oneOfType([prop_types.default.number, prop_types.default.string]),
+	/**
+	* 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,
+	/**
+	* Whether or not the component is readonly
+	*/
 	readOnly: prop_types.default.bool
 };
 //#endregion

package/lib/components/FluidSearch/FluidSearch.Skeleton.js

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

package/lib/components/FluidSearch/FluidSearch.js

@@ -35,19 +35,64 @@ const FluidSearch = (0, react.forwardRef)(({ className, ...other }, ref) => {
 	});
 });
 FluidSearch.propTypes = {
+	/**
+	* Specify an optional value for the `autocomplete` property on the underlying
+	* `<input>`, defaults to "off"
+	*/
 	autoComplete: prop_types.default.string,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify a label to be read by screen readers on the "close" button
+	*/
 	closeButtonLabelText: prop_types.default.string,
+	/**
+	* Optionally provide the default value of the `<input>`
+	*/
 	defaultValue: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify a custom `id` for the input
+	*/
 	id: prop_types.default.string,
+	/**
+	* Provide the label text for the Search icon
+	*/
 	labelText: prop_types.default.node.isRequired,
+	/**
+	* Optional callback called when the search value changes.
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: prop_types.default.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the input
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* Provide an optional placeholder text for the Search.
+	* Note: if the label and placeholder differ,
+	* VoiceOver on Mac will read both
+	*/
 	placeholder: prop_types.default.string,
+	/**
+	* Specify the role for the underlying `<input>`, defaults to `searchbox`
+	*/
 	role: prop_types.default.string,
+	/**
+	* Optional prop to specify the type of the `<input>`
+	*/
 	type: prop_types.default.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number])
 };
 //#endregion

package/lib/components/FluidSelect/FluidSelect.Skeleton.js

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

package/lib/components/FluidSelect/FluidSelect.js

@@ -36,17 +36,55 @@ const FluidSelect = react.default.forwardRef(({ className, children, ...other },
 	});
 });
 FluidSelect.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,
+	/**
+	* Optionally provide the default value of the `<select>`
+	*/
 	defaultValue: prop_types.default.any,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify a custom `id` for the `<select>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* 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,
+	/**
+	* Provide an optional `onChange` hook that is called each time the value of
+	* the underlying `<input>` changes
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* 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,
+	/**
+	* Whether or not the component is readonly
+	*/
 	readOnly: prop_types.default.bool
 };
 //#endregion

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

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