@carbon/react 1.110.0 → 1.111.0-rc.0

package/lib/components/TimePicker/TimePicker.js

@@ -9,10 +9,10 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -134,30 +134,97 @@ const TimePicker = (0, react.forwardRef)((props, ref) => {
 	});
 });
 TimePicker.propTypes = {
+	/**
+	* Pass in the children that will be rendered next to the form control
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the `<input>` should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify whether you want the underlying label to be visually hidden
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Specify a custom `id` for the `<input>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify whether the control is currently 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,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: prop_types.default.node,
+	/**
+	* The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
+	*/
 	light: require_deprecate.deprecate(prop_types.default.bool, "The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead."),
+	/**
+	* Specify the maximum length of the time string in `<input>`
+	*/
 	maxLength: prop_types.default.number,
+	/**
+	* Optionally provide an `onBlur` handler that is called whenever the
+	* `<input>` loses focus
+	*/
 	onBlur: prop_types.default.func,
+	/**
+	* Optionally provide an `onChange` handler that is called whenever `<input>`
+	* is updated
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Optionally provide an `onClick` handler that is called whenever the
+	* `<input>` is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Specify the regular expression working as the pattern of the time string in `<input>`
+	*/
 	pattern: prop_types.default.string,
+	/**
+	* Specify the placeholder attribute for the `<input>`
+	*/
 	placeholder: prop_types.default.string,
+	/**
+	* Specify whether the TimePicker should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* Specify the size of the Time Picker.
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify the type of the `<input>`
+	*/
 	type: prop_types.default.string,
+	/**
+	* Specify the value of the `<input>`
+	*/
 	value: prop_types.default.string,
+	/**
+	* Specify a warning message
+	*/
 	warning: prop_types.default.bool,
+	/**
+	* Provide the text that is displayed when the control is in an warning state
+	*/
 	warningText: prop_types.default.node
 };
 //#endregion

package/lib/components/TimePickerSelect/TimePickerSelect.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -46,10 +46,25 @@ const TimePickerSelect = (0, react.forwardRef)((props, ref) => {
 	});
 });
 TimePickerSelect.propTypes = {
+	/**
+	* Provide the contents of your TimePickerSelect
+	*/
 	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
 };
 //#endregion

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/Toggle/Toggle.js

@@ -9,10 +9,10 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_useControllableState = require("../../internal/useControllableState.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -96,19 +96,65 @@ function Toggle({ "aria-labelledby": ariaLabelledby, className, defaultToggled =
 	});
 }
 Toggle.propTypes = {
+	/**
+	* Specify another element's id to be used as the label for this toggle
+	*/
 	"aria-labelledby": prop_types.default.string,
+	/**
+	* Specify a custom className to apply to the form-item node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the toggle should be on by default
+	*/
 	defaultToggled: prop_types.default.bool,
+	/**
+	* Whether this control should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* If true, the side labels (props.labelA and props.labelB) will be replaced by
+	* props.labelText (if passed), so that the toggle doesn't render a top label.
+	*/
 	hideLabel: prop_types.default.bool,
+	/**
+	* Provide an id that unique represents the underlying `<button>`
+	*/
 	id: prop_types.default.string.isRequired,
+	/**
+	* Specify the label for the "off" position
+	*/
 	labelA: prop_types.default.node,
+	/**
+	* Specify the label for the "on" position
+	*/
 	labelB: prop_types.default.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control. This should be provided unless 'aria-labelledby' is set instead
+	* or you use an external <label> element with its "for" attribute set to the
+	* toggle's id.
+	*/
 	labelText: prop_types.default.string,
+	/**
+	* Provide an event listener that is called when the control is clicked
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide an event listener that is called when the control is toggled
+	*/
 	onToggle: prop_types.default.func,
+	/**
+	* Whether the toggle should be read-only
+	*/
 	readOnly: prop_types.default.bool,
+	/**
+	* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+	*/
 	size: prop_types.default.oneOf(["sm", "md"]),
+	/**
+	* Specify whether the control is toggled
+	*/
 	toggled: prop_types.default.bool
 };
 //#endregion

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -51,8 +51,19 @@ const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
 };
 ToggleSmallSkeleton.propTypes = {
 	["aria-label"]: prop_types.default.string.isRequired,
+	/**
+	* Specify an optional className to add to the form item wrapper.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide an id that unique represents the underlying `<input>`
+	*/
 	id: prop_types.default.string,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control. `aria-label` is always required but will be `null` if `labelText`
+	* is also provided.
+	*/
 	labelText: prop_types.default.string
 };
 //#endregion

package/lib/components/Toggletip/index.js

@@ -12,10 +12,10 @@ const require_match = require("../../internal/keyboard/match.js");
 const require_useId = require("../../internal/useId.js");
 const require_useEvent = require("../../internal/useEvent.js");
 const require_index = require("../Popover/index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -37,8 +37,19 @@ function ToggletipLabel({ as: BaseComponent = "span", children, className: custo
 	});
 }
 ToggletipLabel.propTypes = {
+	/**
+	* Provide a custom element or component to render the top-level node for the
+	* component.
+	*/
 	as: prop_types.default.elementType,
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string
 };
 const ToggletipContext = react.default.createContext(void 0);
@@ -130,6 +141,9 @@ function Toggletip({ align, as, autoAlign, className: customClassName, children,
 const { open, ...popoverNonOpenPropTypes } = require_index.Popover.propTypes ?? {};
 Toggletip.propTypes = {
 	...popoverNonOpenPropTypes,
+	/**
+	* Specify if the toggletip should be open by default
+	*/
 	defaultOpen: prop_types.default.bool
 };
 /**
@@ -157,8 +171,18 @@ const ToggletipButton = (0, react.forwardRef)(function ToggletipButton({ childre
 	});
 });
 ToggletipButton.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide an accessible label for this button
+	*/
 	label: prop_types.default.string
 };
 ToggletipButton.displayName = "ToggletipButton";
@@ -182,7 +206,14 @@ const ToggletipContent = (0, react.forwardRef)((props, ref) => {
 	});
 });
 ToggletipContent.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string
 };
 ToggletipContent.displayName = "ToggletipContent";
@@ -197,7 +228,14 @@ function ToggletipActions({ children, className: customClassName }) {
 	});
 }
 ToggletipActions.propTypes = {
+	/**
+	* Custom children to be rendered as the content of the label
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a custom class name to be added to the outermost node in the
+	* component
+	*/
 	className: prop_types.default.string
 };
 //#endregion

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -12,10 +12,10 @@ const require_match = require("../../internal/keyboard/match.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_index = require("../Popover/index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -75,6 +75,9 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 	});
 };
 DefinitionTooltip.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -97,14 +100,47 @@ DefinitionTooltip.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* Will auto-align the popover. This prop is currently experimental and is
+	* subject to future changes. Requires React v17+
+	* @see https://github.com/carbon-design-system/carbon/issues/18714
+	*/
 	autoAlign: prop_types.default.bool,
+	/**
+	* The `children` prop will be used as the value that is being defined
+	*/
 	children: prop_types.default.node.isRequired,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the tooltip should be open when it first renders
+	*/
 	defaultOpen: prop_types.default.bool,
+	/**
+	* The `definition` prop is used as the content inside of the tooltip that
+	* appears when a user interacts with the element rendered by the `children`
+	* prop
+	*/
 	definition: prop_types.default.node.isRequired,
+	/**
+	* Provide a value that will be assigned as the id of the tooltip
+	*/
 	id: prop_types.default.string,
+	/**
+	* Specifies whether or not the `DefinitionTooltip` should open on hover or not
+	*/
 	openOnHover: prop_types.default.bool,
+	/**
+	* [Deprecated in v11] Please use the `definition` prop instead.
+	*
+	* Provide the text that will be displayed in the tooltip when it is rendered.
+	*/
 	tooltipText: require_deprecate.deprecate(prop_types.default.node, "The tooltipText prop has been deprecated. Please use the `definition` prop instead."),
+	/**
+	* The CSS class name of the trigger element
+	*/
 	triggerClassName: prop_types.default.string
 };
 //#endregion

package/lib/components/Tooltip/Tooltip.js

@@ -14,10 +14,10 @@ const require_useId = require("../../internal/useId.js");
 const require_index = require("../Popover/index.js");
 const require_useDelayedState = require("../../internal/useDelayedState.js");
 const require_useNoInteractiveChildren = require("../../internal/useNoInteractiveChildren.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -163,6 +163,9 @@ const Tooltip = react.default.forwardRef(({ as, align = "top", className: custom
 	});
 });
 Tooltip.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -185,15 +188,58 @@ Tooltip.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* Pass in the child to which the tooltip will be applied
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+	*/
 	closeOnActivation: prop_types.default.bool,
+	/**
+	* Specify whether the tooltip should be open when it first renders
+	*/
 	defaultOpen: prop_types.default.bool,
+	/**
+	* Provide the description to be rendered inside of the Tooltip. The
+	* description will use `aria-describedby` and will describe the child node
+	* in addition to the text rendered inside of the child. This means that if you
+	* have text in the child node, that it will be announced alongside the
+	* description to the screen reader.
+	*
+	* Note: if label and description are both provided, label will be used and
+	* description will not be used
+	*/
 	description: prop_types.default.node,
+	/**
+	* Specify whether a drop shadow should be rendered
+	*/
 	dropShadow: prop_types.default.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip
+	*/
 	enterDelayMs: prop_types.default.number,
+	/**
+	* Render the component using the high-contrast theme
+	*/
 	highContrast: prop_types.default.bool,
+	/**
+	* Provide the label to be rendered inside of the Tooltip. The label will use
+	* `aria-labelledby` and will fully describe the child node that is provided.
+	* This means that if you have text in the child node, that it will not be
+	* announced to the screen reader.
+	*
+	* Note: if label and description are both provided, description will not be
+	* used
+	*/
 	label: prop_types.default.node,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: prop_types.default.number
 };
 //#endregion

package/lib/components/TreeView/TreeContext.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-require("../../_virtual/_rolldown/runtime.js");
 let react = require("react");
 //#region src/components/TreeView/TreeContext.ts
 /**

package/lib/components/TreeView/TreeNode.js

@@ -15,10 +15,10 @@ const require_index = require("../FeatureFlags/index.js");
 const require_index$1 = require("../IconButton/index.js");
 const require_useControllableState = require("../../internal/useControllableState.js");
 const require_TreeContext = require("./TreeContext.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -340,23 +340,81 @@ const TreeNode = react.default.forwardRef(({ children, className, disabled, id:
 	}) });
 });
 TreeNode.propTypes = {
+	/**
+	* **Note:** this is controlled by the parent TreeView component, do not set manually.
+	* The ID of the active node in the tree
+	*/
 	active: require_deprecate.deprecate(prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]), "The `active` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	/**
+	* Specify the children of the TreeNode
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be applied to the TreeNode
+	*/
 	className: prop_types.default.string,
+	/**
+	* **[Experimental]** The default expansion state of the node.
+	* *This is only supported with the `enable-treeview-controllable` feature flag!*
+	*/
 	defaultIsExpanded: prop_types.default.bool,
+	/**
+	* **Note:** this is controlled by the parent TreeView component, do not set manually.
+	* TreeNode depth to determine spacing
+	*/
 	depth: require_deprecate.deprecate(prop_types.default.number, "The `depth` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	/**
+	* Specify if the TreeNode is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
+	*/
 	id: prop_types.default.string,
+	/**
+	* Specify if the TreeNode is expanded (only applicable to parent nodes)
+	*/
 	isExpanded: prop_types.default.bool,
+	/**
+	* Rendered label for the TreeNode
+	*/
 	label: prop_types.default.node,
+	/**
+	* Callback function for when the node receives or loses focus
+	*/
 	onNodeFocusEvent: require_deprecate.deprecate(prop_types.default.func, "The `onNodeFocusEvent` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	/**
+	* Callback function for when the node is selected
+	*/
 	onSelect: prop_types.default.func,
+	/**
+	* Callback function for when a parent node is expanded or collapsed
+	*/
 	onToggle: prop_types.default.func,
+	/**
+	* Callback function for when any node in the tree is selected
+	*/
 	onTreeSelect: require_deprecate.deprecate(prop_types.default.func, "The `onTreeSelect` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* **Note:** this is controlled by the parent TreeView component, do not set manually.
+	* Array containing all selected node IDs in the tree
+	*/
 	selected: require_deprecate.deprecate(prop_types.default.arrayOf(prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number])), "The `selected` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	/**
+	* Specify the value of the TreeNode
+	*/
 	value: prop_types.default.string,
+	/**
+	* Optional: The URL the TreeNode is linking to
+	*/
 	href: prop_types.default.string,
+	/**
+	* Specify how the tooltip should align when text is truncated
+	*/
 	align: prop_types.default.oneOf([
 		"top",
 		"bottom",
@@ -371,6 +429,12 @@ TreeNode.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* **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: prop_types.default.bool
 };
 TreeNode.displayName = "TreeNode";