@carbon/react 1.112.0 → 1.113.0

package/es/components/TextInput/TextInput.js

@@ -16,8 +16,8 @@ import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { getTextInputProps } from "./util.js";
 import { getAnnouncement } from "../../internal/getAnnouncement.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TextInput/TextInput.tsx
@@ -66,7 +66,7 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 		placeholder,
 		type,
 		ref: mergedRef,
-		className: classNames(`${prefix}--text-input`, {
+		className: cx(`${prefix}--text-input`, {
 			[`${prefix}--text-input--light`]: light,
 			[`${prefix}--text-input--invalid`]: normalizedProps.invalid,
 			[`${prefix}--text-input--warning`]: normalizedProps.warn,
@@ -80,33 +80,33 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 		...rest
 	};
 	if (enableCounter) sharedTextInputProps.maxLength = maxCount;
-	const inputWrapperClasses = classNames([classNames(`${prefix}--form-item`, className)], `${prefix}--text-input-wrapper`, {
+	const inputWrapperClasses = cx([cx(`${prefix}--form-item`, className)], `${prefix}--text-input-wrapper`, {
 		[`${prefix}--text-input-wrapper--readonly`]: readOnly,
 		[`${prefix}--text-input-wrapper--light`]: light,
 		[`${prefix}--text-input-wrapper--inline`]: inline,
 		[`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled,
 		[`${prefix}--label--inline`]: inline,
 		[`${prefix}--label--inline--${size}`]: inline && !!size
 	});
-	const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+	const helperTextClasses = cx(`${prefix}--form__helper-text`, {
 		[`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
 		[`${prefix}--form__helper-text--inline`]: inline
 	});
-	const fieldOuterWrapperClasses = classNames(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
-	const fieldWrapperClasses = classNames(`${prefix}--text-input__field-wrapper`, {
+	const fieldOuterWrapperClasses = cx(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
+	const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
 		[`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
 		[`${prefix}--text-input__field-wrapper--slug`]: slug,
 		[`${prefix}--text-input__field-wrapper--decorator`]: decorator
 	});
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
 	});
-	const counterClasses = classNames(`${prefix}--label`, {
+	const counterClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--text-input__label-counter`]: true
 	});

package/es/components/TextInput/index.js

@@ -6,7 +6,7 @@
  */
 
 import TextInput from "./TextInput.js";
-import "./TextInput.Skeleton.js";
+import { TextInputSkeleton } from "./TextInput.Skeleton.js";
 //#region src/components/TextInput/index.ts
 /**
 * Copyright IBM Corp. 2016, 2025
@@ -16,4 +16,4 @@ import "./TextInput.Skeleton.js";
 */
 var TextInput_default = TextInput;
 //#endregion
-export { TextInput_default as default };
+export { TextInput, TextInputSkeleton, TextInput_default as default };

package/es/components/Theme/index.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { LayerContext } from "../Layer/LayerContext.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
-import classNames from "classnames";
 import React, { cloneElement, isValidElement, useMemo } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Theme/index.tsx
@@ -51,7 +51,7 @@ GlobalTheme.propTypes = {
 */
 function Theme({ as: BaseComponent = "div", className: customClassName, theme, ...rest }) {
 	const prefix = usePrefix();
-	const className = classNames(customClassName, {
+	const className = cx(customClassName, {
 		[`${prefix}--white`]: theme === "white",
 		[`${prefix}--g10`]: theme === "g10",
 		[`${prefix}--g90`]: theme === "g90",

package/es/components/Tile/Tile.js

@@ -19,8 +19,8 @@ import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { getInteractiveContent, getRoleContent } from "../../internal/useNoInteractiveChildren.js";
 import { AILabel } from "../AILabel/index.js";
 import { composeEventHandlers } from "../../tools/events.js";
-import classNames from "classnames";
 import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AiLabel, ArrowRight, Checkbox, CheckboxCheckedFilled, ChevronDown, Error } from "@carbon/icons-react";
@@ -34,7 +34,7 @@ import { AiLabel, ArrowRight, Checkbox, CheckboxCheckedFilled, ChevronDown, Erro
 const Tile = React.forwardRef(({ children, className, decorator, light = false, slug, hasRoundedCorners = false, ...rest }, ref) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--tile`, {
+		className: cx(`${prefix}--tile`, {
 			[`${prefix}--tile--light`]: light,
 			[`${prefix}--tile--slug`]: slug,
 			[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
@@ -86,7 +86,7 @@ Tile.propTypes = {
 };
 const ClickableTile = React.forwardRef(({ children, className, clicked = false, decorator, disabled, href, light, onClick = () => {}, onKeyDown = () => {}, renderIcon: Icon, hasRoundedCorners, slug, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const classes = classNames(`${prefix}--tile`, `${prefix}--tile--clickable`, {
+	const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
 		[`${prefix}--tile--is-clicked`]: clicked,
 		[`${prefix}--tile--light`]: light,
 		[`${prefix}--tile--slug`]: slug,
@@ -111,7 +111,7 @@ const ClickableTile = React.forwardRef(({ children, className, clicked = false,
 		if (!Icon) Icon = ArrowRight;
 		if (disabled) Icon = Error;
 	}
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
 		[`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
 	});
@@ -205,7 +205,7 @@ const SelectableTile = React.forwardRef(({ children, className, decorator, disab
 	useEffect(() => {
 		setIsSelected(selected);
 	}, [selected]);
-	const classes = classNames(`${prefix}--tile`, `${prefix}--tile--selectable`, {
+	const classes = cx(`${prefix}--tile`, `${prefix}--tile--selectable`, {
 		[`${prefix}--tile--is-selected`]: isSelected,
 		[`${prefix}--tile--light`]: light,
 		[`${prefix}--tile--disabled`]: disabled,
@@ -355,27 +355,30 @@ const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorato
 			if (matches(evt, [Enter, Space])) evt.preventDefault();
 		}
 	};
-	const classNames$1 = classNames(`${prefix}--tile`, `${prefix}--tile--expandable`, {
+	const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
 		[`${prefix}--tile--is-expanded`]: isExpanded,
 		[`${prefix}--tile--light`]: light
 	}, className);
-	const interactiveClassNames = classNames(classNames$1, `${prefix}--tile--expandable--interactive`, {
+	const interactiveClassNames = cx(classNames, `${prefix}--tile--expandable--interactive`, {
 		[`${prefix}--tile--slug`]: slug,
 		[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
 		[`${prefix}--tile--decorator`]: decorator,
 		[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
 	});
-	const chevronInteractiveClassNames = classNames(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
+	const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
 	const childrenAsArray = Children.toArray(children);
 	useIsomorphicEffect(() => {
 		if (!tile.current || !aboveTheFold.current) return;
 		const style = window.getComputedStyle(tile.current);
-		setMeasuredPadding((parseInt(style.getPropertyValue("padding-top"), 10) || 0) + (parseInt(style.getPropertyValue("padding-bottom"), 10) || 0));
+		const paddingTop = parseInt(style.getPropertyValue("padding-top"), 10) || 0;
+		const paddingBottom = parseInt(style.getPropertyValue("padding-bottom"), 10) || 0;
+		setMeasuredPadding(paddingTop + paddingBottom);
 		setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
 	}, []);
 	useIsomorphicEffect(() => {
 		if (!aboveTheFold.current || !belowTheFold.current) return;
-		setInteractive(Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator));
+		const hasInteractive = Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
+		setInteractive(hasInteractive);
 	}, [
 		slug,
 		decorator,
@@ -447,7 +450,7 @@ const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorato
 	}) : /* @__PURE__ */ jsx("button", {
 		type: "button",
 		ref,
-		className: classNames$1,
+		className: classNames,
 		"aria-controls": belowTheFoldId,
 		"aria-expanded": isExpanded,
 		title: isExpanded ? tileExpandedIconText : tileCollapsedIconText,

package/es/components/TileGroup/TileGroup.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePrefix } from "../../internal/usePrefix.js";
 import { noopFn } from "../../internal/noopFn.js";
+import { usePrefix } from "../../internal/usePrefix.js";
 import { isComponentElement } from "../../internal/utils.js";
 import RadioTile_default from "../RadioTile/index.js";
 import { Children, cloneElement, createElement, isValidElement, useEffect, useState } from "react";

package/es/components/TimePicker/TimePicker.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
-import classNames from "classnames";
 import React, { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TimePicker/TimePicker.tsx
@@ -40,11 +40,11 @@ const TimePicker = forwardRef((props, ref) => {
 		warn: warning,
 		warnText: warningText
 	});
-	const timePickerInputClasses = classNames(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
+	const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
 		[`${prefix}--text-input--light`]: light,
 		[`${prefix}--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn
 	});
-	const timePickerClasses = classNames({
+	const timePickerClasses = cx({
 		[`${prefix}--time-picker`]: true,
 		[`${prefix}--time-picker--light`]: light,
 		[`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
@@ -53,7 +53,7 @@ const TimePicker = forwardRef((props, ref) => {
 		[`${prefix}--time-picker--${size}`]: size,
 		...pickerClassName && { [pickerClassName]: true }
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: disabled
 	});
@@ -91,7 +91,7 @@ const TimePicker = forwardRef((props, ref) => {
 	const readOnlyProps = { readOnly };
 	const describedBy = [normalizedProps.invalid ? normalizedProps.invalidId : normalizedProps.warn ? normalizedProps.warnId : null, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		children: [
 			label,
 			/* @__PURE__ */ jsxs("div", {

package/es/components/TimePickerSelect/TimePickerSelect.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -22,7 +22,7 @@ const TimePickerSelect = forwardRef((props, ref) => {
 	const { ["aria-label"]: ariaLabel = "open list of options", children, id, disabled = false, className, ...rest } = props;
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--select`]: true,
 			[`${prefix}--time-picker__select`]: true,
 			...className && { [className]: true }

package/es/components/Toggle/Toggle.Skeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Toggle/Toggle.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const ToggleSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--toggle ${prefix}--toggle--skeleton`, className),
+		className: cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--toggle__skeleton-circle` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--toggle__skeleton-rectangle` })]
 	});
@@ -30,4 +30,4 @@ ToggleSkeleton.propTypes = {
 	className: PropTypes.string
 };
 //#endregion
-export { ToggleSkeleton as default };
+export { ToggleSkeleton, ToggleSkeleton as default };

package/es/components/Toggle/Toggle.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { useControllableState } from "../../internal/useControllableState.js";
-import classNames from "classnames";
 import { useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Toggle/Toggle.tsx
@@ -35,13 +35,13 @@ function Toggle({ "aria-labelledby": ariaLabelledby, className, defaultToggled =
 	const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
 	const renderSideLabel = !(hideLabel && !labelText);
 	const LabelComponent = labelText ? "label" : "div";
-	const wrapperClasses = classNames(`${prefix}--toggle`, {
+	const wrapperClasses = cx(`${prefix}--toggle`, {
 		[`${prefix}--toggle--disabled`]: disabled,
 		[`${prefix}--toggle--readonly`]: readOnly
 	}, className);
-	const labelTextClasses = classNames(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
-	const appearanceClasses = classNames(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
-	const switchClasses = classNames(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
+	const labelTextClasses = cx(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const appearanceClasses = cx(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
+	const switchClasses = cx(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
 	const labelId = `${id}_label`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: wrapperClasses,
@@ -154,4 +154,4 @@ Toggle.propTypes = {
 	toggled: PropTypes.bool
 };
 //#endregion
-export { Toggle as default };
+export { Toggle, Toggle as default };

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { PrefixContext } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import { useContext } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ToggleSmall/ToggleSmall.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
 	const prefix = useContext(PrefixContext);
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsx("input", {
 			type: "checkbox",

package/es/components/Toggletip/index.js

@@ -11,8 +11,8 @@ import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { useWindowEvent } from "../../internal/useEvent.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
-import classNames from "classnames";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Toggletip/index.tsx
@@ -27,7 +27,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function ToggletipLabel({ as: BaseComponent = "span", children, className: customClassName, ...rest }) {
 	return /* @__PURE__ */ jsx(BaseComponent, {
-		className: classNames(`${usePrefix()}--toggletip-label`, customClassName),
+		className: cx(`${usePrefix()}--toggletip-label`, customClassName),
 		...rest,
 		children
 	});
@@ -62,7 +62,7 @@ function Toggletip({ align, as, autoAlign, className: customClassName, children,
 	const [open, setOpen] = useState(defaultOpen);
 	const prefix = usePrefix();
 	const id = useId();
-	const className = classNames(`${prefix}--toggletip`, customClassName, {
+	const className = cx(`${prefix}--toggletip`, customClassName, {
 		[`${prefix}--toggletip--open`]: open,
 		[`${prefix}--autoalign`]: autoAlign
 	});
@@ -148,7 +148,7 @@ Toggletip.propTypes = {
 */
 const ToggletipButton = forwardRef(function ToggletipButton({ children, className: customClassName, label = "Show information", as: BaseComponent, ...rest }, ref) {
 	const toggletip = useToggletip();
-	const className = classNames(`${usePrefix()}--toggletip-button`, customClassName);
+	const className = cx(`${usePrefix()}--toggletip-button`, customClassName);
 	const ComponentToggle = BaseComponent ?? "button";
 	if (ComponentToggle !== "button") return /* @__PURE__ */ jsx(ComponentToggle, {
 		...toggletip?.onClick,
@@ -219,7 +219,7 @@ ToggletipContent.displayName = "ToggletipContent";
 */
 function ToggletipActions({ children, className: customClassName }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${usePrefix()}--toggletip-actions`, customClassName),
+		className: cx(`${usePrefix()}--toggletip-actions`, customClassName),
 		children
 	});
 }
@@ -235,4 +235,4 @@ ToggletipActions.propTypes = {
 	className: PropTypes.string
 };
 //#endregion
-export { ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Toggletip as default };
+export { Toggletip, Toggletip as default, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };

package/es/components/Tooltip/DefinitionTooltip.js

@@ -11,8 +11,8 @@ import { match } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
-import classNames from "classnames";
 import { useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tooltip/DefinitionTooltip.tsx
@@ -53,7 +53,7 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 		open: isOpen,
 		children: [/* @__PURE__ */ jsx("button", {
 			...rest,
-			className: classNames(`${prefix}--definition-term`, triggerClassName),
+			className: cx(`${prefix}--definition-term`, triggerClassName),
 			"aria-controls": tooltipId,
 			"aria-describedby": tooltipId,
 			"aria-expanded": isOpen,

package/es/components/Tooltip/Tooltip.d.ts

@@ -21,7 +21,8 @@ interface TooltipBaseProps {
      */
     className?: string;
     /**
-     * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+     * Controls whether the tooltip closes when the trigger is activated with
+     * click, Enter, or Space.
      */
     closeOnActivation?: boolean;
     /**

package/es/components/Tooltip/Tooltip.js

@@ -13,8 +13,8 @@ import { useId } from "../../internal/useId.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
 import { useDelayedState } from "../../internal/useDelayedState.js";
 import { useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";
-import classNames from "classnames";
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tooltip/Tooltip.tsx
@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Event types that trigger a "drag" to stop.
 */
-const DRAG_STOP_EVENT_TYPES = new Set([
+const DRAG_STOP_EVENT_TYPES = /* @__PURE__ */ new Set([
 	"mouseup",
 	"touchend",
 	"touchcancel"
@@ -136,7 +136,7 @@ const Tooltip = React.forwardRef(({ as, align = "top", className: customClassNam
 		ref,
 		...rest,
 		align,
-		className: classNames(`${prefix}--tooltip`, customClassName),
+		className: cx(`${prefix}--tooltip`, customClassName),
 		dropShadow,
 		highContrast,
 		onKeyDown,
@@ -193,7 +193,8 @@ Tooltip.propTypes = {
 	*/
 	className: PropTypes.string,
 	/**
-	* Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+	* Controls whether the tooltip closes when the trigger is activated with
+	* click, Enter, or Space.
 	*/
 	closeOnActivation: PropTypes.bool,
 	/**

package/es/components/TreeView/TreeNode.js

@@ -14,8 +14,8 @@ import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { IconButton } from "../IconButton/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { DepthContext, TreeContext } from "./TreeContext.js";
-import classNames from "classnames";
 import React, { isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDown } from "@carbon/icons-react";
@@ -52,8 +52,10 @@ const useEllipsisCheck = (label, detailsWrapperRef) => {
 			return;
 		}
 		const checkElement = detailsWrapperRef.current || element;
-		if (checkElement && checkElement.offsetWidth > 0) setIsEllipsisApplied(element.scrollWidth > checkElement.offsetWidth);
-		else setIsEllipsisApplied(false);
+		if (checkElement && checkElement.offsetWidth > 0) {
+			const isTextTruncated = element.scrollWidth > checkElement.offsetWidth;
+			setIsEllipsisApplied(isTextTruncated);
+		} else setIsEllipsisApplied(false);
 	}, [detailsWrapperRef]);
 	useEffect(() => {
 		const animationFrameId = requestAnimationFrame(checkEllipsis);
@@ -87,7 +89,8 @@ const TreeNode = React.forwardRef(({ children, className, disabled, id: nodeId,
 	const active = propActive ?? treeContext?.active;
 	const selected = propSelected ?? treeContext?.selected ?? [];
 	const onTreeSelect = propOnTreeSelect ?? treeContext?.onTreeSelect;
-	const { labelTextRef, isEllipsisApplied, tooltipText } = useEllipsisCheck(label, useRef(null));
+	const detailsWrapperRef = useRef(null);
+	const { labelTextRef, isEllipsisApplied, tooltipText } = useEllipsisCheck(label, detailsWrapperRef);
 	const enableTreeviewControllable = useFeatureFlag("enable-treeview-controllable");
 	const generatedId = useId();
 	const { current: id } = useRef(nodeId ?? generatedId);
@@ -131,7 +134,7 @@ const TreeNode = React.forwardRef(({ children, className, disabled, id: nodeId,
 	};
 	const isActive = active === id;
 	const isSelected = selected?.includes(id) ?? false;
-	const treeNodeClasses = classNames(className, `${prefix}--tree-node`, {
+	const treeNodeClasses = cx(className, `${prefix}--tree-node`, {
 		[`${prefix}--tree-node--active`]: isActive,
 		[`${prefix}--tree-node--disabled`]: disabled,
 		[`${prefix}--tree-node--selected`]: isSelected,
@@ -139,7 +142,7 @@ const TreeNode = React.forwardRef(({ children, className, disabled, id: nodeId,
 		[`${prefix}--tree-leaf-node`]: !children,
 		[`${prefix}--tree-parent-node`]: children
 	});
-	const toggleClasses = classNames(`${prefix}--tree-parent-node__toggle-icon`, { [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded });
+	const toggleClasses = cx(`${prefix}--tree-parent-node__toggle-icon`, { [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded });
 	function handleToggleClick(event) {
 		if (disabled) return;
 		event.stopPropagation();
@@ -312,7 +315,7 @@ const TreeNode = React.forwardRef(({ children, className, disabled, id: nodeId,
 			id: `${id}-subtree`,
 			role: "group",
 			"aria-labelledby": nodeLabelId,
-			className: classNames(`${prefix}--tree-node__children`, { [`${prefix}--tree-node--hidden`]: !expanded }),
+			className: cx(`${prefix}--tree-node__children`, { [`${prefix}--tree-node--hidden`]: !expanded }),
 			children: /* @__PURE__ */ jsx(DepthContext.Provider, {
 				value: depth + 1,
 				children
@@ -327,7 +330,7 @@ const TreeNode = React.forwardRef(({ children, className, disabled, id: nodeId,
 			id: `${id}-subtree`,
 			role: "group",
 			"aria-labelledby": nodeLabelId,
-			className: classNames(`${prefix}--tree-node__children`, { [`${prefix}--tree-node--hidden`]: !expanded }),
+			className: cx(`${prefix}--tree-node__children`, { [`${prefix}--tree-node--hidden`]: !expanded }),
 			children: /* @__PURE__ */ jsx(DepthContext.Provider, {
 				value: depth + 1,
 				children

package/es/components/TreeView/TreeView.js

@@ -13,8 +13,8 @@ import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { DepthContext, TreeContext } from "./TreeContext.js";
 import TreeNode from "./TreeNode.js";
-import classNames from "classnames";
 import { useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TreeView/TreeView.tsx
@@ -29,7 +29,7 @@ const TreeView = ({ active: prespecifiedActive, children, className, hideLabel =
 	const generatedId = useId();
 	const { current: treeId } = useRef(rest.id ?? generatedId);
 	const prefix = usePrefix();
-	const treeClasses = classNames(className, `${prefix}--tree`, { [`${prefix}--tree--${size}`]: size !== "default" });
+	const treeClasses = cx(className, `${prefix}--tree`, { [`${prefix}--tree--${size}`]: size !== "default" });
 	const treeRootRef = useRef(null);
 	const treeWalker = useRef(null);
 	const controllableSelectionState = useControllableState({

package/es/components/UIShell/Content.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 //#region src/components/UIShell/Content.ts
 /**
@@ -17,7 +17,7 @@ import PropTypes from "prop-types";
 * LICENSE file in the root directory of this source tree.
 */
 const Content = ({ className: customClassName, children, tagName = "main", ...rest }) => {
-	const className = classNames(`${usePrefix()}--content`, customClassName);
+	const className = cx(`${usePrefix()}--content`, customClassName);
 	return React.createElement(tagName, {
 		...rest,
 		className

package/es/components/UIShell/Header.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/UIShell/Header.tsx
@@ -18,7 +18,7 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const Header = ({ className: customClassName, children, ...rest }) => {
-	const className = classNames(`${usePrefix()}--header`, customClassName);
+	const className = cx(`${usePrefix()}--header`, customClassName);
 	return /* @__PURE__ */ jsx("header", {
 		...rest,
 		className,

package/es/components/UIShell/HeaderGlobalAction.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import Button_default from "../Button/index.js";
 import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/UIShell/HeaderGlobalAction.tsx
@@ -29,7 +29,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const HeaderGlobalAction = React.forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className: customClassName, onClick, tooltipHighContrast = true, tooltipDropShadow, isActive, tooltipAlignment, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[customClassName]: !!customClassName,
 		[`${prefix}--header__action`]: true,
 		[`${prefix}--header__action--active`]: isActive

package/es/components/UIShell/HeaderMenu.js

@@ -14,8 +14,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
 import HeaderMenuItem from "./HeaderMenuItem.js";
-import classNames from "classnames";
 import { Children, cloneElement, forwardRef, useContext, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -93,12 +93,12 @@ const HeaderMenu = forwardRef((props, ref) => {
 		"aria-label": ariaLabel,
 		"aria-labelledby": ariaLabelledBy
 	};
-	const itemClassName = classNames({
+	const itemClassName = cx({
 		[`${prefix}--header__submenu`]: true,
 		[`${customClassName}`]: !!customClassName
 	});
 	const isActivePage = isActive ? isActive : isCurrentPage;
-	const linkClassName = classNames({
+	const linkClassName = cx({
 		[`${prefix}--header__menu-item`]: true,
 		[`${prefix}--header__menu-title`]: true,
 		[`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !expanded
@@ -180,4 +180,4 @@ HeaderMenu.propTypes = {
 	tabIndex: PropTypes.number
 };
 //#endregion
-export { HeaderMenu as default };
+export { HeaderMenu, HeaderMenu as default };