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

package/es/components/NumberInput/NumberInput.js

@@ -467,18 +467,63 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 	});
 });
 NumberInput.propTypes = {
+	/**
+	* `true` to allow empty string.
+	*/
 	allowEmpty: PropTypes.bool,
+	/**
+	* Specify an optional className to be applied to the wrapper node
+	*/
 	className: PropTypes.string,
+	/**
+	* **Experimental**: Provide a `decorator` component to be rendered inside the `NumberInput` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* 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 no t
+	*/
 	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 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,
+	/**
+	* Specify whether you want the steppers to be hidden
+	*/
 	hideSteppers: PropTypes.bool,
+	/**
+	* 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",
@@ -489,33 +534,126 @@ NumberInput.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,
+	/**
+	* `true` to use the light version.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `NumberInput` 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."),
+	/**
+	* **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 the value stepping should begin at when the input is empty
+	*/
 	stepStartValue: PropTypes.number,
+	/**
+	* Provide an optional handler that is called when the input is blurred.
+	*/
 	onBlur: PropTypes.func,
+	/**
+	* Provide an optional handler that is called when the stepper
+	* buttons are blurred.
+	*/
 	onStepperBlur: PropTypes.func,
+	/**
+	* 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 if the component should be read-only
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the size of the Number Input.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* **Experimental**: Provide a `Slug` component to be rendered inside the
+	* `NumberInput` component
+	*/
 	slug: deprecate(PropTypes.node, "The `slug` prop for `NumberInput` is no longer needed and has been deprecated in v11 in favor of the new `decorator` prop. It will be moved in the next major release."),
+	/**
+	* 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,
+	/**
+	* Optional validation function that is called with the input value and locale.
+	*
+	* - Return `false` to immediately fail validation.
+	* - Return `true` to pass this validation, but still run other checks (min, max, required, etc.).
+	* - Return `undefined` to defer entirely to built-in validation logic.
+	*
+	* This is called before other validations, giving consumers the ability
+	* to short-circuit or extend validation without replacing built-in rules.
+	*/
 	validate: PropTypes.func
 };
 const Label = ({ disabled, id, hideLabel, label }) => {

package/es/components/OrderedList/OrderedList.js

@@ -30,10 +30,25 @@ function OrderedList({ className, nested = false, native = false, isExpressive =
 	});
 }
 OrderedList.propTypes = {
+	/**
+	* Provide list items to be rendered in the ordered list
+	*/
 	children: PropTypes.node,
+	/**
+	* Provide an optional className to be applied to the containing <ol> node
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether this ordered list expressive or not
+	*/
 	isExpressive: PropTypes.bool,
+	/**
+	* Specify whether this ordered list should use native list styles instead of custom counter
+	*/
 	native: PropTypes.bool,
+	/**
+	* Specify whether this ordered list is nested inside of another nested list
+	*/
 	nested: PropTypes.bool
 };
 //#endregion

package/es/components/OverflowMenu/OverflowMenu.js

@@ -282,6 +282,9 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	}) });
 });
 OverflowMenu.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: deprecateValuesWithin(PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -317,34 +320,107 @@ OverflowMenu.propTypes = {
 		"right-start",
 		"right-end"
 	], mapPopoverAlign),
+	/**
+	* Specify a label to be read by screen readers on the container node
+	*/
 	["aria-label"]: PropTypes.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify a label to be read by screen readers on the container note.
+	*/
 	ariaLabel: deprecate(PropTypes.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* The child nodes.
+	*/
 	children: PropTypes.node,
+	/**
+	* The CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* The menu direction.
+	*/
 	direction: PropTypes.oneOf(["top", DIRECTION_BOTTOM]),
+	/**
+	* `true` if the menu alignment should be flipped.
+	*/
 	flipped: PropTypes.bool,
+	/**
+	* @deprecated Tab key is handled with event handler so no need for focus trap.
+	* Enable or disable focus trap behavior
+	*/
 	focusTrap: PropTypes.bool,
+	/**
+	* The CSS class for the icon.
+	*/
 	iconClass: PropTypes.string,
+	/**
+	* The icon description.
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* The element ID.
+	*/
 	id: PropTypes.string,
+	/**
+	* `true` to use the light version. For use on $ui-01 backgrounds only.
+	* Don't use this to make OverflowMenu background color same as container background color.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead."),
+	/**
+	* The adjustment in position applied to the floating menu.
+	*/
 	menuOffset: PropTypes.oneOfType([PropTypes.shape({
 		top: PropTypes.number.isRequired,
 		left: PropTypes.number.isRequired
 	}), PropTypes.func]),
+	/**
+	* The adjustment in position applied to the floating menu when flipped.
+	*/
 	menuOffsetFlip: PropTypes.oneOfType([PropTypes.shape({
 		top: PropTypes.number.isRequired,
 		left: PropTypes.number.isRequired
 	}), PropTypes.func]),
+	/**
+	* The class to apply to the menu options
+	*/
 	menuOptionsClass: PropTypes.string,
+	/**
+	* The event handler for the `click` event.
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Function called when menu is closed
+	*/
 	onClose: PropTypes.func,
+	/**
+	* The event handler for the `focus` event.
+	*/
 	onFocus: PropTypes.func,
+	/**
+	* The event handler for the `keydown` event.
+	*/
 	onKeyDown: PropTypes.func,
+	/**
+	* Function called when menu is opened
+	*/
 	onOpen: PropTypes.func,
+	/**
+	* `true` if the menu should be open.
+	*/
 	open: PropTypes.bool,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify a CSS selector that matches the DOM element that should
+	* be focused when the OverflowMenu opens
+	*/
 	selectorPrimaryFocus: PropTypes.string,
+	/**
+	* Specify the size of the OverflowMenu. Currently supports either `xs`, `sm`, `md` (default) or `lg` as an option.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",

package/es/components/OverflowMenu/next/index.js

@@ -105,23 +105,50 @@ const OverflowMenu = React.forwardRef(({ autoAlign = false, children, className,
 	});
 });
 OverflowMenu.propTypes = {
+	/**
+	* **Experimental**: Will attempt to automatically align the floating element
+	* to avoid collisions with the viewport and being clipped by ancestor
+	* elements. Requires React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: PropTypes.bool,
+	/**
+	* A collection of MenuItems to be rendered within this OverflowMenu.
+	*/
 	children: PropTypes.node,
+	/**
+	* Additional CSS class names for the trigger button.
+	*/
 	className: PropTypes.string,
+	/**
+	* A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+	*/
 	label: PropTypes.string,
+	/**
+	* Experimental property. Specify how the menu should align with the button element
+	*/
 	menuAlignment: PropTypes.oneOf([
 		"top-start",
 		"top-end",
 		"bottom-start",
 		"bottom-end"
 	]),
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify the size of the menu, from a list of available sizes.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify how the trigger tooltip should be aligned.
+	*/
 	tooltipAlignment: deprecateValuesWithin(PropTypes.oneOf([
 		"top",
 		"top-left",
@@ -157,6 +184,9 @@ OverflowMenu.propTypes = {
 		"right-start",
 		"right-end"
 	], mapPopoverAlign),
+	/**
+	* Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+	*/
 	menuTarget: PropTypes.instanceOf(typeof Element !== "undefined" ? Element : Object)
 };
 //#endregion

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -83,16 +83,43 @@ const OverflowMenuItem = forwardRef((props, ref) => {
 	});
 });
 OverflowMenuItem.propTypes = {
+	/**
+	* The CSS class name to be placed on the button element
+	*/
 	className: PropTypes.string,
+	/**
+	* A callback to tell the parent menu component that the menu should be closed.
+	*/
 	closeMenu: PropTypes.func,
+	/**
+	* Specify the message read by screen readers for the danger overflow menu item variant
+	*/
 	dangerDescription: PropTypes.string,
+	/**
+	* `true` to make this menu item disabled.
+	*/
 	disabled: PropTypes.bool,
 	handleOverflowMenuItemFocus: PropTypes.func,
+	/**
+	* `true` to make this menu item a divider.
+	*/
 	hasDivider: PropTypes.bool,
+	/**
+	* If given, overflow item will render as a link with the given href
+	*/
 	href: PropTypes.string,
 	index: PropTypes.number,
+	/**
+	* `true` to make this menu item a "danger button".
+	*/
 	isDelete: PropTypes.bool,
+	/**
+	* The text in the menu item.
+	*/
 	itemText: PropTypes.node.isRequired,
+	/**
+	* event handlers
+	*/
 	onBlur: PropTypes.func,
 	onClick: PropTypes.func,
 	onFocus: PropTypes.func,
@@ -102,8 +129,17 @@ OverflowMenuItem.propTypes = {
 	onMouseEnter: PropTypes.func,
 	onMouseLeave: PropTypes.func,
 	onMouseUp: PropTypes.func,
+	/**
+	* `true` if this menu item has long text and requires a browser tooltip
+	*/
 	requireTitle: PropTypes.bool,
+	/**
+	* Specify a title for the OverflowMenuItem
+	*/
 	title: PropTypes.string,
+	/**
+	* The CSS class name to be placed on the wrapper list item element
+	*/
 	wrapperClassName: PropTypes.string
 };
 //#endregion

package/es/components/PageHeader/PageHeader.js

@@ -146,12 +146,33 @@ const PageHeaderContent = React.forwardRef(({ className, children, title, render
 });
 PageHeaderContent.displayName = "PageHeaderContent";
 PageHeaderContent.propTypes = {
+	/**
+	* Provide child elements to be rendered inside PageHeaderContent.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your PageHeaderContent
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide an optional icon to render in front of the PageHeaderContent's title.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* The PageHeaderContent's title
+	*/
 	title: PropTypes.string.isRequired,
+	/**
+	* The PageHeaderContent's subtitle
+	*/
 	subtitle: PropTypes.string,
+	/**
+	* The PageHeaderContent's contextual actions
+	*/
 	contextualActions: PropTypes.node,
+	/**
+	* The PageHeaderContent's page actions
+	*/
 	pageActions: PropTypes.node
 };
 const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "Actions", actions, ...other }) => {
@@ -203,9 +224,21 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 };
 PageHeaderContentPageActions.displayName = "PageHeaderContentPageActions";
 PageHeaderContentPageActions.propTypes = {
+	/**
+	* Provide child elements to be rendered inside PageHeaderContentPageActions.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your PageHeaderContentPageActions
+	*/
 	className: PropTypes.string,
+	/**
+	* The PageHeaderContent's collapsible Menu button label
+	*/
 	menuButtonLabel: PropTypes.string,
+	/**
+	* The PageHeaderContent's page actions
+	*/
 	actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
 };
 const PageHeaderContentText = ({ className, children, subtitle, ...other }) => {
@@ -223,8 +256,17 @@ const PageHeaderContentText = ({ className, children, subtitle, ...other }) => {
 };
 PageHeaderContentText.displayName = "PageHeaderContentText";
 PageHeaderContentText.propTypes = {
+	/**
+	* Provide child elements to be rendered inside PageHeaderContentText.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your PageHeaderContentText
+	*/
 	className: PropTypes.string,
+	/**
+	* The PageHeaderContent's subtitle
+	*/
 	subtitle: PropTypes.string
 };
 const PageHeaderHeroImage = ({ className, children, ...other }) => {
@@ -240,7 +282,13 @@ const PageHeaderHeroImage = ({ className, children, ...other }) => {
 };
 PageHeaderHeroImage.displayName = "PageHeaderHeroImage";
 PageHeaderHeroImage.propTypes = {
+	/**
+	* Provide child elements to be rendered inside PageHeaderHeroImage.
+	*/
 	children: PropTypes.node,
+	/**
+	* Specify an optional className to be added to your PageHeaderHeroImage
+	*/
 	className: PropTypes.string
 };
 const PageHeaderTabBar = React.forwardRef(({ className, children, tags = [], ...other }, ref) => {

package/es/components/Pagination/Pagination.Skeleton.js

@@ -36,6 +36,10 @@ function PaginationSkeleton({ className, ...rest }) {
 		})]
 	});
 }
-PaginationSkeleton.propTypes = { className: PropTypes.string };
+PaginationSkeleton.propTypes = { 
+/**
+* Specify an optional className to add.
+*/
+className: PropTypes.string };
 //#endregion
 export { PaginationSkeleton as default };

package/es/components/Pagination/Pagination.d.ts

@@ -15,6 +15,10 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * The description for the backward icon.
      */
     backwardText?: string;
+    /**
+     * The tooltip position for the backward button.
+     */
+    backwardTextTooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
     /**
      * The CSS class names.
      */
@@ -27,6 +31,10 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * The description for the forward icon.
      */
     forwardText?: string;
+    /**
+     * The tooltip position for the forward button.
+     */
+    forwardTextTooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
     /**
      * The unique ID of this component instance.
      */