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

package/lib/components/Switch/IconSwitch.js

@@ -81,6 +81,9 @@ const IconSwitch = (0, react.forwardRef)((props, ref) => {
 });
 IconSwitch.displayName = "IconSwitch";
 IconSwitch.propTypes = {
+	/**
+	* Specify how the trigger should align with the tooltip
+	*/
 	align: prop_types.default.oneOf([
 		"top",
 		"top-left",
@@ -91,21 +94,65 @@ IconSwitch.propTypes = {
 		"left",
 		"right"
 	]),
+	/**
+	* Children to be rendered inside of the `IconSwitch`.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your `IconSwitch`.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Whether the `IconSwitch` should be disabled.
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip
+	*/
 	enterDelayMs: prop_types.default.number,
+	/**
+	* The index of the `IconSwitch`.
+	*
+	* Reserved for usage in `ContentSwitcher`.
+	*/
 	index: prop_types.default.number,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: prop_types.default.number,
+	/**
+	* The name of the `IconSwitch`.
+	*/
 	name: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* A handler that is invoked when a user clicks on the control.
+	*
+	* Reserved for usage in `ContentSwitcher`.
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* A handler that is invoked on the key down event for the control.
+	*
+	* Reserved for usage in `ContentSwitcher`.
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* Whether the `IconSwitch` is selected.
+	*
+	* Reserved for usage in `ContentSwitcher`.
+	*/
 	selected: prop_types.default.bool,
+	/**
+	* Specify the size of the underlying icon-only button.
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* `Tooltip` text.
+	*/
 	text: prop_types.default.string
 };
 //#endregion

package/lib/components/Switch/Switch.js

@@ -65,14 +65,44 @@ const Switch = react.default.forwardRef((props, tabRef) => {
 });
 Switch.displayName = "Switch";
 Switch.propTypes = {
+	/**
+	* Provide child elements to be rendered inside of the Switch
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your Switch
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether or not the Switch should be disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* The index of your Switch in your ContentSwitcher that is used for event handlers.
+	* Reserved for usage in ContentSwitcher
+	*/
 	index: prop_types.default.number,
+	/**
+	* Provide the name of your Switch that is used for event handlers
+	*/
 	name: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
+	/**
+	* A handler that is invoked when a user clicks on the control.
+	* Reserved for usage in ContentSwitcher
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* A handler that is invoked on the key down event for the control.
+	* Reserved for usage in ContentSwitcher
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* Whether your Switch is selected. Reserved for usage in ContentSwitcher
+	*/
 	selected: prop_types.default.bool,
+	/**
+	* Provide the contents of your Switch
+	*/
 	text: prop_types.default.string
 };
 //#endregion

package/lib/components/TabContent/TabContent.js

@@ -34,8 +34,17 @@ function TabContent(props) {
 	});
 }
 TabContent.propTypes = {
+	/**
+	* Pass in content to render inside the TabContent
+	*/
 	children: prop_types.default.node,
+	/**
+	* Provide a className for the tab content container
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the TabContent is selected
+	*/
 	selected: prop_types.default.bool
 };
 //#endregion

package/lib/components/Tabs/Tabs.Skeleton.js

@@ -49,7 +49,13 @@ function TabsSkeleton({ className, contained, ...rest }) {
 	});
 }
 TabsSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Provide the type of Tab
+	*/
 	contained: prop_types.default.bool
 };
 //#endregion

package/lib/components/Tabs/Tabs.d.ts

@@ -194,6 +194,9 @@ export interface TabListProps extends DivAttributes {
     scrollIntoView?: boolean;
     /**
      * Specify the size of the tabs.
+     *
+     * Supports `sm` and `md` for line tabs.
+     * Supports `sm`, `md`, and `lg` for contained tabs.
      */
     size?: 'sm' | 'md' | 'lg';
 }
@@ -256,6 +259,9 @@ declare namespace TabList {
         scrollIntoView: PropTypes.Requireable<boolean>;
         /**
          * Specify the size of the tabs.
+         *
+         * Supports `sm` and `md` for line tabs.
+         * Supports `sm`, `md`, and `lg` for contained tabs.
          */
         size: PropTypes.Requireable<string>;
     };
@@ -288,8 +294,12 @@ export interface TabListVerticalProps extends DivAttributes {
      * on component rerender
      */
     scrollIntoView?: boolean;
+    /**
+     * Specify the size of the tabs.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
 }
-declare function TabListVertical({ activation, 'aria-label': label, children, className: customClassName, scrollIntoView, ...rest }: TabListVerticalProps): import("react/jsx-runtime").JSX.Element;
+declare function TabListVertical({ activation, 'aria-label': label, children, className: customClassName, scrollIntoView, size, ...rest }: TabListVerticalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabListVertical {
     var propTypes: {
         /**
@@ -311,6 +321,10 @@ declare namespace TabListVertical {
          * Specify an optional className to be added to the container node
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the tabs.
+         */
+        size: PropTypes.Requireable<string>;
     };
 }
 /**

package/lib/components/Tabs/Tabs.js

@@ -83,13 +83,36 @@ function Tabs({ children, defaultSelectedIndex = 0, onChange, selectedIndex: con
 	});
 }
 Tabs.propTypes = {
+	/**
+	* Provide child elements to be rendered inside the `Tabs`.
+	* These elements should render either `TabsList` or `TabsPanels`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify which content tab should be initially selected when the component
+	* is first rendered
+	*/
 	defaultSelectedIndex: prop_types.default.number,
+	/**
+	* Whether the render Tab children should be dismissable.
+	*/
 	dismissable: prop_types.default.bool,
+	/**
+	* Provide an optional function which is called whenever the state of the
+	* `Tabs` changes
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* If specifying the `onTabCloseRequest` prop, provide a callback function
+	* responsible for removing the tab when close button is pressed on one of the Tab elements
+	*/
 	onTabCloseRequest: (props) => {
 		if (props.dismissable && !props.onTabCloseRequest) return /* @__PURE__ */ new Error("dismissable property specified without also providing an onTabCloseRequest property.");
 	},
+	/**
+	* Control which content panel is currently selected. This puts the component
+	* in a controlled mode and should be used along with `onChange`
+	*/
 	selectedIndex: prop_types.default.number
 };
 function TabsVertical({ children, height, defaultSelectedIndex = 0, onChange, selectedIndex: controlledSelectedIndex, ...rest }) {
@@ -116,10 +139,29 @@ function TabsVertical({ children, height, defaultSelectedIndex = 0, onChange, se
 	});
 }
 TabsVertical.propTypes = {
+	/**
+	* Provide child elements to be rendered inside the `TabsVertical`.
+	* These elements should render either `TabsListVertical` or `TabsPanels`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify which content tab should be initially selected when the component
+	* is first rendered
+	*/
 	defaultSelectedIndex: prop_types.default.number,
+	/**
+	* Option to set a height style only if using vertical variation
+	*/
 	height: prop_types.default.string,
+	/**
+	* Provide an optional function which is called whenever the state of the
+	* `Tabs` changes
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Control which content panel is currently selected. This puts the component
+	* in a controlled mode and should be used along with `onChange`
+	*/
 	selectedIndex: prop_types.default.number
 };
 /**
@@ -165,7 +207,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs__icon--default`]: iconSize === "default",
 		[`${prefix}--tabs__icon--lg`]: iconSize === "lg",
 		[`${prefix}--layout--size-lg`]: iconSize === "lg",
-		[`${prefix}--layout--size-${size}`]: size && !hasSecondaryLabelTabs,
+		[`${prefix}--layout--size-${size}`]: size && !hasSecondaryLabelTabs && (contained || size === "sm" || size === "md"),
 		[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable
@@ -335,32 +377,80 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 	});
 }
 TabList.propTypes = {
+	/**
+	* Specify whether the content tab should be activated automatically or
+	* manually
+	*/
 	activation: prop_types.default.oneOf(["automatic", "manual"]),
+	/**
+	* Provide an accessible label to be read when a user interacts with this
+	* component
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Provide child elements to be rendered inside `ContentTabs`.
+	* These elements should render a `ContentTab`
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to the container node
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether component is contained type
+	*/
 	contained: prop_types.default.bool,
+	/**
+	* Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+	*/
 	fullWidth: prop_types.default.bool,
+	/**
+	* If using `IconTab`, specify the size of the icon being used.
+	*/
 	iconSize: prop_types.default.oneOf(["default", "lg"]),
+	/**
+	* Provide the props that describe the left overflow button
+	*/
 	leftOverflowButtonProps: prop_types.default.object,
+	/**
+	* Specify whether to use the light component variant
+	*/
 	light: require_deprecate.deprecate(prop_types.default.bool, "The `light` prop for `TabList` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	* Provide the props that describe the right overflow button
+	*/
 	rightOverflowButtonProps: prop_types.default.object,
+	/**
+	* Optionally provide a delay (in milliseconds) passed to the lodash
+	* debounce of the onScroll handler. This will impact the responsiveness
+	* of scroll arrow buttons rendering when scrolling to the first or last tab.
+	*/
 	scrollDebounceWait: prop_types.default.number,
+	/**
+	* Choose whether to automatically scroll
+	* to newly selected tabs on component rerender
+	*/
 	scrollIntoView: prop_types.default.bool,
+	/**
+	* Specify the size of the tabs.
+	*
+	* Supports `sm` and `md` for line tabs.
+	* Supports `sm`, `md`, and `lg` for contained tabs.
+	*/
 	size: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	])
 };
-function TabListVertical({ activation = "automatic", "aria-label": label, children, className: customClassName, scrollIntoView, ...rest }) {
+function TabListVertical({ activation = "automatic", "aria-label": label, children, className: customClassName, scrollIntoView, size, ...rest }) {
 	const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex } = react.default.useContext(TabsContext);
 	const prefix = require_usePrefix.usePrefix();
 	const ref = (0, react.useRef)(null);
 	const [isOverflowingBottom, setIsOverflowingBottom] = (0, react.useState)(false);
 	const [isOverflowingTop, setIsOverflowingTop] = (0, react.useState)(false);
 	const isSm = require_useMatchMedia.useMatchMedia(smMediaQuery);
-	const className = (0, classnames.default)(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, customClassName);
+	const className = (0, classnames.default)(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, { [`${prefix}--layout--size-${size}`]: size }, customClassName);
 	const tabs = (0, react.useRef)([]);
 	function onKeyDown(event) {
 		if (require_match.matches(event, [
@@ -432,6 +522,7 @@ function TabListVertical({ activation = "automatic", "aria-label": label, childr
 		...rest,
 		"aria-label": label,
 		contained: true,
+		size: size === "xl" ? "lg" : size,
 		children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -464,10 +555,34 @@ function TabListVertical({ activation = "automatic", "aria-label": label, childr
 	});
 }
 TabListVertical.propTypes = {
+	/**
+	* Specify whether the content tab should be activated automatically or
+	* manually
+	*/
 	activation: prop_types.default.oneOf(["automatic", "manual"]),
+	/**
+	* Provide an accessible label to be read when a user interacts with this
+	* component
+	*/
 	"aria-label": prop_types.default.string,
+	/**
+	* Provide child elements to be rendered inside `ContentTabs`.
+	* These elements should render a `ContentTab`
+	*/
 	children: prop_types.default.node,
-	className: prop_types.default.string
+	/**
+	* Specify an optional className to be added to the container node
+	*/
+	className: prop_types.default.string,
+	/**
+	* Specify the size of the tabs.
+	*/
+	size: prop_types.default.oneOf([
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	])
 };
 /**
 * Helper function to set up the behavior when a button is "long pressed".
@@ -681,14 +796,44 @@ const Tab = (0, react.forwardRef)(({ as = "button", children, className: customC
 	}), DismissIcon] });
 });
 Tab.propTypes = {
+	/**
+	* Provide a custom element to render instead of the default button
+	*/
 	as: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.elementType]),
+	/**
+	* Provide child elements to be rendered inside `Tab`.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your Tab
+	*/
 	className: prop_types.default.string,
+	/**
+	* Whether your Tab is disabled.
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Provide a handler that is invoked when a user clicks on the control
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Provide a handler that is invoked on the key down event for the control
+	*/
 	onKeyDown: prop_types.default.func,
+	/**
+	* An optional parameter to allow overriding the anchor rendering.
+	* Useful for using Tab along with react-router or other client
+	* side router libraries.
+	*/
 	renderButton: prop_types.default.func,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* An optional label to render under the primary tab label.
+	* Only useful for contained tabs.
+	*/
 	secondaryLabel: prop_types.default.string
 };
 /**
@@ -719,12 +864,37 @@ const IconTab = react.default.forwardRef(({ badgeIndicator, children, className:
 	});
 });
 IconTab.propTypes = {
+	/**
+	* **Experimental**: Display an empty dot badge on the Tab.
+	*/
 	badgeIndicator: prop_types.default.bool,
+	/**
+	* Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your Tab
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify whether the tooltip for the icon should be open when it first renders
+	*/
 	defaultOpen: prop_types.default.bool,
+	/**
+	* Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
+	*/
 	enterDelayMs: prop_types.default.number,
+	/**
+	* Provide the label to be rendered inside 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 it will not be
+	* announced to the screen reader. If using the badgeIndicator then provide a
+	* label with describing that there is a new notification.
+	*/
 	label: prop_types.default.node.isRequired,
+	/**
+	* Specify the duration in milliseconds to delay before hiding the tooltip
+	*/
 	leaveDelayMs: prop_types.default.number
 };
 const TabPanel = react.default.forwardRef(({ children, className: customClassName, ...rest }, forwardRef) => {
@@ -746,7 +916,13 @@ const TabPanel = react.default.forwardRef(({ children, className: customClassNam
 	});
 });
 TabPanel.propTypes = {
+	/**
+	* Provide child elements to be rendered inside `TabPanel`.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to TabPanel.
+	*/
 	className: prop_types.default.string
 };
 function TabPanels({ children }) {
@@ -779,7 +955,11 @@ function TabPanels({ children }) {
 		});
 	}) });
 }
-TabPanels.propTypes = { children: prop_types.default.node };
+TabPanels.propTypes = { 
+/**
+* Provide child elements to be rendered inside `TabPanels`.
+*/
+children: prop_types.default.node };
 //#endregion
 exports.IconTab = IconTab;
 exports.Tab = Tab;

package/lib/components/Tabs/usePressable.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/Tabs/usePressable.ts
 /**

package/lib/components/Tag/DismissibleTag.js

@@ -99,9 +99,21 @@ const DismissibleTag = (0, react.forwardRef)(({ className, decorator, disabled,
 	});
 });
 DismissibleTag.propTypes = {
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: prop_types.default.string,
+	/**
+	* **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+	*/
 	decorator: prop_types.default.node,
+	/**
+	* Specify if the `DismissibleTag` is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the tooltip alignment for the dismiss button
+	*/
 	dismissTooltipAlignment: prop_types.default.oneOf([
 		"top",
 		"bottom",
@@ -116,15 +128,46 @@ DismissibleTag.propTypes = {
 		"right-end",
 		"right-start"
 	]),
+	/**
+	* Provide a custom tooltip label for the dismiss button
+	*/
 	dismissTooltipLabel: prop_types.default.string,
+	/**
+	* Specify the id for the tag.
+	*/
 	id: prop_types.default.string,
+	/**
+	* Click handler for filter tag close button.
+	*/
 	onClose: prop_types.default.func,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: prop_types.default.oneOf(Object.keys(require_Tag.SIZES)),
+	/**
+	* **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+	*/
 	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Provide text to be rendered inside of a the tag.
+	*/
 	text: prop_types.default.string,
+	/**
+	* Provide a custom `title` to be inserted in the tag.
+	*/
 	tagTitle: prop_types.default.string,
+	/**
+	* Text to show on clear filters
+	*/
 	title: prop_types.default.string,
+	/**
+	* Specify the type of the `Tag`
+	*/
 	type: prop_types.default.oneOf(Object.keys(require_Tag.TYPES))
 };
 //#endregion

package/lib/components/Tag/OperationalTag.js

@@ -93,12 +93,34 @@ const OperationalTag = (0, react.forwardRef)(({ className, disabled, id, renderI
 	});
 });
 OperationalTag.propTypes = {
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify if the `OperationalTag` is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the id for the tag.
+	*/
 	id: prop_types.default.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: prop_types.default.oneOf(Object.keys(require_Tag.SIZES)),
+	/**
+	* Provide text to be rendered inside of a the tag.
+	*/
 	text: prop_types.default.string,
+	/**
+	* Specify the type of the `Tag`
+	*/
 	type: prop_types.default.oneOf(Object.keys(TYPES))
 };
 //#endregion

package/lib/components/Tag/SelectableTag.js

@@ -92,15 +92,46 @@ const SelectableTag = (0, react.forwardRef)(({ className, disabled, id, renderIc
 	});
 });
 SelectableTag.propTypes = {
+	/**
+	* Provide a custom className that is applied to the containing <span>
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify if the `SelectableTag` is disabled
+	*/
 	disabled: prop_types.default.bool,
+	/**
+	* Specify the id for the tag.
+	*/
 	id: prop_types.default.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
+	/**
+	* Provide an optional hook that is called when selected is changed
+	*/
 	onChange: prop_types.default.func,
+	/**
+	* Provide an optional function to be called when the tag is clicked.
+	*/
 	onClick: prop_types.default.func,
+	/**
+	* Specify the state of the selectable tag.
+	*/
 	selected: prop_types.default.bool,
+	/**
+	* Specify the default state of the selectable tag.
+	*/
 	defaultSelected: prop_types.default.bool,
+	/**
+	* Specify the size of the Tag. Currently supports either `sm`,
+	* `md` (default) or `lg` sizes.
+	*/
 	size: prop_types.default.oneOf(Object.keys(require_Tag.SIZES)),
+	/**
+	* Provide text to be rendered inside of a the tag.
+	*/
 	text: prop_types.default.string
 };
 //#endregion

package/lib/components/Tag/Tag.Skeleton.js

@@ -32,7 +32,14 @@ function TagSkeleton({ className, size, ...rest }) {
 	});
 }
 TagSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: prop_types.default.string,
+	/**
+	* Specify the size of the Tag. Currently supports either `sm` or
+	* default sizes.
+	*/
 	size: prop_types.default.oneOf(["sm"])
 };
 //#endregion