@carbon/react 1.112.0 → 1.113.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -23,8 +23,8 @@ import ListBox from "../ListBox/index.js";
 import ListBoxSelection from "../ListBox/next/ListBoxSelection.js";
 import ListBoxTrigger from "../ListBox/next/ListBoxTrigger.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkmark, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -103,8 +103,10 @@ const ComboBox = forwardRef((props, ref) => {
 					item: itemToString(item),
 					inputValue
 				}));
-				if (filteredItems.length > 0) setTypeaheadText(itemToString(filteredItems[0]).slice(inputValue.length));
-				else setTypeaheadText("");
+				if (filteredItems.length > 0) {
+					const suggestion = itemToString(filteredItems[0]);
+					setTypeaheadText(suggestion.slice(inputValue.length));
+				} else setTypeaheadText("");
 			} else setTypeaheadText("");
 			else setTypeaheadText("");
 			prevInputLengthRef.current = inputValue.length;
@@ -305,24 +307,24 @@ const ComboBox = forwardRef((props, ref) => {
 		warn: warn || false,
 		warnText
 	});
-	const className = classNames(`${prefix}--combo-box`, {
+	const className = cx(`${prefix}--combo-box`, {
 		[`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
 		[`${prefix}--list-box--up`]: direction === "top",
 		[`${prefix}--combo-box--warning`]: normalizedProps.warn,
 		[`${prefix}--combo-box--readonly`]: readOnly,
 		[`${prefix}--autoalign`]: enableFloatingStyles
 	});
-	const titleClasses = classNames(`${prefix}--label`, { [`${prefix}--label--disabled`]: disabled });
+	const titleClasses = cx(`${prefix}--label`, { [`${prefix}--label--disabled`]: disabled });
 	const helperTextId = `combobox-helper-text-${comboBoxInstanceId}`;
 	const warnTextId = `combobox-warn-text-${comboBoxInstanceId}`;
 	const invalidTextId = `combobox-invalid-text-${comboBoxInstanceId}`;
-	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const wrapperClasses = classNames(`${prefix}--list-box__wrapper`, [containerClassName, {
+	const helperClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const wrapperClasses = cx(`${prefix}--list-box__wrapper`, [containerClassName, {
 		[`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
 		[`${prefix}--list-box__wrapper--slug`]: slug,
 		[`${prefix}--list-box__wrapper--decorator`]: decorator
 	}]);
-	const inputClasses = classNames(`${prefix}--text-input`, {
+	const inputClasses = cx(`${prefix}--text-input`, {
 		[`${prefix}--text-input--empty`]: !inputValue,
 		[`${prefix}--combo-box--input--focus`]: isFocused
 	});
@@ -541,7 +543,8 @@ const ComboBox = forwardRef((props, ref) => {
 											if (!isOpen) return;
 											const matchingItem = items.find((item) => !isItemDisabled(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
 											if (matchingItem) {
-												downshiftSetInputValue(itemToString(matchingItem));
+												const newValue = itemToString(matchingItem);
+												downshiftSetInputValue(newValue);
 												selectItem(matchingItem);
 											}
 										}

package/es/components/ComboBox/index.js

@@ -15,4 +15,4 @@ import ComboBox from "./ComboBox.js";
 */
 var ComboBox_default = ComboBox;
 //#endregion
-export { ComboBox_default as default };
+export { ComboBox, ComboBox_default as default };

package/es/components/ComboButton/index.js

@@ -16,8 +16,8 @@ import Button_default from "../Button/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Menu as Menu$1 } from "../Menu/Menu.js";
 import { useAttachedMenu } from "../../internal/useAttachedMenu.js";
-import classNames from "classnames";
 import React, { useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -72,10 +72,10 @@ const ComboButton = React.forwardRef(function ComboButton({ children, className,
 	function handlePrimaryActionClick(e) {
 		if (onClick) onClick(e);
 	}
-	const containerClasses = classNames(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size$1}`, { [`${prefix}--combo-button__container--open`]: open }, className);
-	const menuClasses = classNames(`${prefix}--combo-button__${menuAlignment}`);
-	const primaryActionClasses = classNames(`${prefix}--combo-button__primary-action`);
-	const triggerClasses = classNames(`${prefix}--combo-button__trigger`);
+	const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size$1}`, { [`${prefix}--combo-button__container--open`]: open }, className);
+	const menuClasses = cx(`${prefix}--combo-button__${menuAlignment}`);
+	const primaryActionClasses = cx(`${prefix}--combo-button__primary-action`);
+	const triggerClasses = cx(`${prefix}--combo-button__trigger`);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: containerClasses,

package/es/components/ComposedModal/ComposedModal.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
@@ -27,8 +27,8 @@ import { Dialog } from "../Dialog/Dialog.js";
 import { useComposedModalState } from "./useComposedModalState.js";
 import { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext } from "./ComposedModalPresence.js";
 import { isTopmostVisibleModal } from "../Modal/isTopmostVisibleModal.js";
-import classNames from "classnames";
 import React, { Children, cloneElement, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMergeRefs } from "@floating-ui/react";
@@ -50,7 +50,7 @@ const ModalBody = React.forwardRef(function ModalBody({ ["aria-label"]: ariaLabe
 	*/
 	const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
 	return /* @__PURE__ */ jsx(Layer, {
-		className: classNames({
+		className: cx({
 			[`${prefix}--modal-content`]: true,
 			[`${prefix}--modal-content--with-form`]: hasForm,
 			[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
@@ -160,7 +160,8 @@ const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["ar
 		onKeyDown?.(event);
 	}
 	function handleOnMouseDown(evt) {
-		onMouseDownTarget.current = evt.target;
+		const target = evt.target;
+		onMouseDownTarget.current = target;
 	}
 	function handleOnClick(evt) {
 		const { target } = evt;
@@ -189,14 +190,14 @@ const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["ar
 	function closeModal(evt) {
 		if (!onClose || onClose(evt) !== false) setIsOpen(false);
 	}
-	const modalClass = classNames(`${prefix}--modal`, {
+	const modalClass = cx(`${prefix}--modal`, {
 		"is-visible": enablePresence || isOpen,
 		[`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
 		[`${prefix}--modal--danger`]: danger,
 		[`${prefix}--modal--slug`]: slug,
 		[`${prefix}--modal--decorator`]: decorator
 	}, customClassName);
-	const containerClass = classNames(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
+	const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 	let generatedAriaLabel;
 	const childrenWithProps = React.Children.toArray(children).map((child) => {
 		if (isComponentElement(child, ModalHeader)) {

package/es/components/ComposedModal/ComposedModalPresence.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePresenceContext } from "../../internal/usePresenceContext.js";
+import { PresenceHoldContext, usePresenceContext } from "../../internal/usePresenceContext.js";
 import { useComposedModalState } from "./useComposedModalState.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -32,7 +32,10 @@ const ComposedModalPresence = ({ open, _presenceId: presenceId, _autoEnablePrese
 	if (!isPresent) return null;
 	return /* @__PURE__ */ jsx(ComposedModalPresenceContext, {
 		value: presenceContextValue,
-		children
+		children: /* @__PURE__ */ jsx(PresenceHoldContext, {
+			value: presenceContextValue,
+			children
+		})
 	});
 };
 const ComposedModalPresenceContext = createContext(void 0);

package/es/components/ComposedModal/ModalFooter.js

@@ -5,13 +5,13 @@
  * 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 Button_default from "../Button/index.js";
 import ButtonSet_default from "../ButtonSet/index.js";
 import InlineLoading_default from "../InlineLoading/index.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ComposedModal/ModalFooter.tsx
@@ -63,8 +63,8 @@ SecondaryButtonSet.propTypes = {
 };
 const ModalFooter = React.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = noopFn, danger, dangerDescription = "", inputref, onRequestClose = noopFn, onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, ...rest }, ref) {
 	const prefix = usePrefix();
-	const footerClass = classNames(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
-	const primaryButtonClass = classNames(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
+	const footerClass = cx(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
+	const primaryButtonClass = cx(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
 	const loadingActive = loadingStatus !== "inactive";
 	const secondaryButtonProps = {
 		closeModal,

package/es/components/ComposedModal/ModalHeader.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { IconButton } from "../IconButton/index.js";
 import { ComposedModalContext } from "./ComposedModalContext.js";
-import classNames from "classnames";
 import React, { useContext, useEffect } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -51,11 +51,11 @@ const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, child
 		closeModal?.(evt);
 		buttonOnClick?.(evt);
 	}
-	const headerClass = classNames(`${prefix}--modal-header`, customClassName);
-	const labelClass = classNames(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
-	const titleClass = classNames(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
-	const closeClass = classNames(`${prefix}--modal-close`, closeClassName);
-	const closeIconClass = classNames(`${prefix}--modal-close__icon`, closeIconClassName);
+	const headerClass = cx(`${prefix}--modal-header`, customClassName);
+	const labelClass = cx(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
+	const titleClass = cx(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
+	const closeClass = cx(`${prefix}--modal-close`, closeClassName);
+	const closeIconClass = cx(`${prefix}--modal-close__icon`, closeIconClassName);
 	return /* @__PURE__ */ jsxs("div", {
 		className: headerClass,
 		...rest,

package/es/components/ContainedList/ContainedList.js

@@ -12,8 +12,8 @@ import { LayoutConstraint } from "../Layout/index.js";
 import ContainedListItem_default from "./ContainedListItem/index.js";
 import Search from "../Search/Search.js";
 import ExpandableSearch_default from "../ExpandableSearch/index.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/ContainedList/ContainedList.tsx
@@ -27,7 +27,7 @@ const filterChildren = (children) => {
 const ContainedList = ({ action, children, className, isInset, kind = variants[0], label, size, ...rest }) => {
 	const labelId = `${useId("contained-list")}-header`;
 	const prefix = usePrefix();
-	const classes = classNames(`${prefix}--contained-list`, {
+	const classes = cx(`${prefix}--contained-list`, {
 		[`${prefix}--contained-list--inset-rulers`]: isInset,
 		[`${prefix}--contained-list--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -7,15 +7,15 @@
 
 import { usePrefix } from "../../../internal/usePrefix.js";
 import { LayoutConstraint } from "../../Layout/index.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContainedList/ContainedListItem/ContainedListItem.tsx
 const ContainedListItem = ({ action, children, className, disabled = false, onClick, renderIcon: IconElement, ...rest }) => {
 	const prefix = usePrefix();
 	const isClickable = onClick !== void 0;
-	const classes = classNames(`${prefix}--contained-list-item`, className, {
+	const classes = cx(`${prefix}--contained-list-item`, className, {
 		[`${prefix}--contained-list-item--clickable`]: isClickable,
 		[`${prefix}--contained-list-item--with-icon`]: IconElement,
 		[`${prefix}--contained-list-item--with-action`]: action

package/es/components/ContainedList/ContainedListItem/index.js

@@ -15,4 +15,4 @@ import ContainedListItem from "./ContainedListItem.js";
 */
 var ContainedListItem_default = ContainedListItem;
 //#endregion
-export { ContainedListItem_default as default };
+export { ContainedListItem, ContainedListItem_default as default };

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -14,8 +14,8 @@ import { isComponentElement } from "../../internal/utils.js";
 import { LayoutConstraint } from "../Layout/index.js";
 import Switch from "../Switch/Switch.js";
 import IconSwitch from "../Switch/IconSwitch.js";
-import classNames from "classnames";
 import { Children, cloneElement, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ContentSwitcher/ContentSwitcher.tsx
@@ -71,7 +71,7 @@ const ContentSwitcher = ({ children, className, light, lowContrast, selectedInde
 	const isIconOnly = Children.map(children, (child) => {
 		return isComponentElement(child, IconSwitch);
 	})?.every((val) => val === true);
-	const classes = classNames(`${prefix}--content-switcher`, className, {
+	const classes = cx(`${prefix}--content-switcher`, className, {
 		[`${prefix}--content-switcher--light`]: light,
 		[`${prefix}--content-switcher--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size,

package/es/components/Copy/Copy.js

@@ -5,14 +5,14 @@
  * 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 { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { IconButton } from "../IconButton/index.js";
 import { composeEventHandlers } from "../../tools/events.js";
-import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { debounce } from "es-toolkit/compat";
@@ -26,7 +26,7 @@ import { debounce } from "es-toolkit/compat";
 function Copy({ align = "bottom", autoAlign = false, children, className, feedback = "Copied!", feedbackTimeout = 2e3, onAnimationEnd, onClick = noopFn, ...other }) {
 	const [animation, setAnimation] = useState("");
 	const prefix = usePrefix();
-	const classNames$1 = classNames(className, `${prefix}--copy`, {
+	const classNames = cx(className, `${prefix}--copy`, {
 		[`${prefix}--copy-btn--animating`]: animation,
 		[`${prefix}--copy-btn--${animation}`]: animation
 	});
@@ -48,7 +48,7 @@ function Copy({ align = "bottom", autoAlign = false, children, className, feedba
 		closeOnActivation: false,
 		align,
 		autoAlign,
-		className: classNames$1,
+		className: classNames,
 		label: animation ? feedback : initialLabel,
 		leaveDelayMs: animation ? feedbackTimeout : void 0,
 		onClick: composeEventHandlers([onClick, handleClick]),

package/es/components/Copy/index.js

@@ -15,4 +15,4 @@ import Copy from "./Copy.js";
 */
 var Copy_default = Copy;
 //#endregion
-export { Copy_default as default };
+export { Copy, Copy_default as default };

package/es/components/CopyButton/CopyButton.js

@@ -5,14 +5,14 @@
  * 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 { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import Copy_default from "../Copy/index.js";
 import { LayoutConstraint } from "../Layout/index.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { Copy } from "@carbon/icons-react";
@@ -36,7 +36,7 @@ function CopyButton({ align = "bottom", autoAlign = false, feedback = "Copied!",
 			onClick,
 			align,
 			autoAlign,
-			className: classNames(className, `${prefix}--copy-btn`),
+			className: cx(className, `${prefix}--copy-btn`),
 			"aria-label": iconDescription,
 			...other,
 			children: /* @__PURE__ */ jsx(Copy, { className: `${prefix}--snippet__icon` })

package/es/components/CopyButton/index.js

@@ -15,4 +15,4 @@ import CopyButton from "./CopyButton.js";
 */
 var CopyButton_default = CopyButton;
 //#endregion
-export { CopyButton_default as default };
+export { CopyButton, CopyButton_default as default };

package/es/components/DataTable/DataTable.js

@@ -13,7 +13,7 @@ import { getNextSortState } from "./state/sorting.js";
 import getDerivedStateFromProps from "./state/getDerivedStateFromProps.js";
 import denormalize from "./tools/denormalize.js";
 import { defaultFilterRows } from "./tools/filter.js";
-import Table from "./Table.js";
+import { Table } from "./Table.js";
 import TableActionList from "./TableActionList.js";
 import TableBatchAction from "./TableBatchAction.js";
 import TableBatchActions from "./TableBatchActions.js";
@@ -89,7 +89,7 @@ const DataTable = (props) => {
 		const nextHeaders = headers.map((header) => header.key);
 		const hasRowIdsChanged = !isEqual(nextRowIds, state.rowIds);
 		const hasHeadersChanged = !isEqual(nextHeaders, Array.from(new Set(Object.keys(state.cellsById).map((id) => id.split(":")[1]))));
-		const hasRowsChanged = !isEqual(rows, state.rowIds.map((id) => {
+		const currentRows = state.rowIds.map((id) => {
 			const row = state.rowsById[id];
 			return {
 				id: row.id,
@@ -97,7 +97,8 @@ const DataTable = (props) => {
 				isExpanded: row.isExpanded,
 				isSelected: row.isSelected
 			};
-		}));
+		});
+		const hasRowsChanged = !isEqual(rows, currentRows);
 		if (hasRowIdsChanged || hasHeadersChanged || hasRowsChanged) setState((prev) => getDerivedStateFromProps(props, prev));
 	}, [headers, rows]);
 	const getHeaderProps = ({ header, onClick, isSortable: headerIsSortable, ...rest }) => {

package/es/components/DataTable/Table.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useWindowEvent } from "../../internal/useEvent.js";
 import { TableContext } from "./TableContext.js";
-import classNames from "classnames";
 import { useCallback, useContext, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { debounce } from "es-toolkit/compat";
@@ -39,7 +39,7 @@ const Table = ({ className, children, useZebraStyles, size = "lg", isSortable =
 	const { titleId, descriptionId } = useContext(TableContext);
 	const prefix = usePrefix();
 	const tableRef = useRef(null);
-	const componentClass = classNames(`${prefix}--data-table`, className, {
+	const componentClass = cx(`${prefix}--data-table`, className, {
 		[`${prefix}--data-table--${size}`]: size,
 		[`${prefix}--data-table--sort`]: isSortable,
 		[`${prefix}--data-table--zebra`]: useZebraStyles,
@@ -146,4 +146,4 @@ Table.propTypes = {
 	tabIndex: PropTypes.number
 };
 //#endregion
-export { Table as default };
+export { Table, Table as default };

package/es/components/DataTable/TableBatchActions.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import Button_default from "../Button/index.js";
 import TableActionList from "./TableActionList.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DataTable/TableBatchActions.tsx
@@ -47,11 +47,11 @@ const defaultTranslateWithId = (messageId, args = {
 const TableBatchActions = ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t = defaultTranslateWithId, ...rest }) => {
 	const [isScrolling, setIsScrolling] = React.useState(false);
 	const prefix = usePrefix();
-	const batchActionsClasses = classNames({
+	const batchActionsClasses = cx({
 		[`${prefix}--batch-actions`]: true,
 		[`${prefix}--batch-actions--active`]: shouldShowBatchActions
 	}, className);
-	const batchSummaryClasses = classNames(`${prefix}--batch-summary`, { [`${prefix}--batch-summary__scroll`]: isScrolling });
+	const batchSummaryClasses = cx(`${prefix}--batch-summary`, { [`${prefix}--batch-summary__scroll`]: isScrolling });
 	return /* @__PURE__ */ jsxs("div", {
 		onScroll: () => {
 			setIsScrolling(!isScrolling);

package/es/components/DataTable/TableCell.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 } from "react/jsx-runtime";
 //#region src/components/DataTable/TableCell.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const TableCell = forwardRef((props, ref) => {
 	const { children, className, hasAILabelHeader, colSpan, ...rest } = props;
-	const tableCellClassNames = classNames(className, { [`${usePrefix()}--table-cell--column-slug`]: hasAILabelHeader });
+	const tableCellClassNames = cx(className, { [`${usePrefix()}--table-cell--column-slug`]: hasAILabelHeader });
 	return /* @__PURE__ */ jsx("td", {
 		className: tableCellClassNames ? tableCellClassNames : void 0,
 		ref,

package/es/components/DataTable/TableContainer.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { TableContext } from "./TableContext.js";
 import { Heading, Section } from "../Heading/index.js";
-import classNames from "classnames";
 import { useMemo } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DataTable/TableContainer.tsx
@@ -25,7 +25,7 @@ const TableContainer = ({ aiEnabled, className, children, decorator, title, desc
 	const titleId = `${baseId}-title`;
 	const descriptionId = `${baseId}-description`;
 	const prefix = usePrefix();
-	const tableContainerClasses = classNames(className, `${prefix}--data-table-container`, {
+	const tableContainerClasses = cx(className, `${prefix}--data-table-container`, {
 		[`${prefix}--data-table--max-width`]: stickyHeader,
 		[`${prefix}--data-table-container--static`]: useStaticWidth,
 		[`${prefix}--data-table-container--ai-enabled`]: aiEnabled
@@ -47,7 +47,7 @@ const TableContainer = ({ aiEnabled, className, children, decorator, title, desc
 			...rest,
 			className: tableContainerClasses,
 			children: [(title || description || decorator) && /* @__PURE__ */ jsxs("div", {
-				className: classNames(`${prefix}--data-table-header`, {
+				className: cx(`${prefix}--data-table-header`, {
 					[`${prefix}--data-table-header__with-decorator`]: decorator,
 					[`${prefix}--data-table-header__with-decorator--standalone`]: decorator && !title && !description
 				}),

package/es/components/DataTable/TableDecoratorRow.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { AILabel } from "../AILabel/index.js";
-import classNames from "classnames";
 import { cloneElement } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableDecoratorRow.tsx
@@ -22,7 +22,7 @@ import { jsx } from "react/jsx-runtime";
 const TableDecoratorRow = ({ className, decorator }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames({
+		className: cx({
 			...className && { [className]: true },
 			[`${prefix}--table-column-decorator`]: true,
 			[`${prefix}--table-column-decorator--active`]: decorator

package/es/components/DataTable/TableExpandHeader.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "@carbon/icons-react";
@@ -24,7 +24,7 @@ const TableExpandHeader = ({ ["aria-controls"]: ariaControls, ["aria-label"]: ar
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("th", {
 		scope: "col",
-		className: classNames(`${prefix}--table-expand`, headerClassName),
+		className: cx(`${prefix}--table-expand`, headerClassName),
 		"data-previous-value": isExpanded ? "collapsed" : void 0,
 		id,
 		...rest,

package/es/components/DataTable/TableExpandRow.js

@@ -11,8 +11,8 @@ import { AILabel } from "../AILabel/index.js";
 import TableCell from "./TableCell.js";
 import TableDecoratorRow from "./TableDecoratorRow.js";
 import TableSlugRow from "./TableSlugRow.js";
-import classNames from "classnames";
 import { Children, forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "@carbon/icons-react";
@@ -38,7 +38,7 @@ const TableExpandRow = forwardRef(({ ["aria-controls"]: ariaControls, ["aria-lab
 	const normalizedChildren = Children.toArray(children).map((child) => {
 		if (!isComponentElement(child, TableSlugRow) && !isComponentElement(child, TableDecoratorRow)) return child;
 	});
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--parent-row`]: true,
 		[`${prefix}--expandable-row`]: isExpanded,
 		[`${prefix}--data-table--selected`]: isSelected,

package/es/components/DataTable/TableExpandedRow.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import TableCell from "./TableCell.js";
-import classNames from "classnames";
 import { useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableExpandedRow.tsx
@@ -21,7 +21,7 @@ import { jsx } from "react/jsx-runtime";
 const TableExpandedRow = ({ className: customClassName, children, colSpan, ...rest }) => {
 	const rowRef = useRef(null);
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--expandable-row`, customClassName);
+	const className = cx(`${prefix}--expandable-row`, customClassName);
 	const toggleParentHoverClass = (eventType) => {
 		if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
 			const parentNode = rowRef.current.previousElementSibling;

package/es/components/DataTable/TableHeader.js

@@ -10,8 +10,8 @@ import { useId } from "../../internal/useId.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { AILabel } from "../AILabel/index.js";
 import { sortStates } from "./state/sortStates.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUp, ArrowsVertical } from "@carbon/icons-react";
@@ -53,7 +53,7 @@ const TableHeader = forwardRef((props, ref) => {
 		size: "mini",
 		ref: AILableRef
 	}) : candidate;
-	const headerLabelClassNames = classNames({
+	const headerLabelClassNames = cx({
 		[`${prefix}--table-header-label`]: true,
 		[`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
 		[`${prefix}--table-header-label--decorator`]: decorator
@@ -73,7 +73,7 @@ const TableHeader = forwardRef((props, ref) => {
 			})]
 		}) : null
 	});
-	const className = classNames(headerClassName, {
+	const className = cx(headerClassName, {
 		[`${prefix}--table-sort`]: true,
 		[`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.NONE,
 		[`${prefix}--table-sort--descending`]: isSortHeader && sortDirection === sortStates.DESC
@@ -85,7 +85,7 @@ const TableHeader = forwardRef((props, ref) => {
 		isSortHeader,
 		sortStates
 	});
-	const headerClasses = classNames(headerClassName, `${prefix}--table-sort__header`, {
+	const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`, {
 		[`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
 		[`${prefix}--table-sort__header--decorator`]: decorator
 	});

package/es/components/DataTable/TableRow.js

@@ -10,8 +10,8 @@ import { isComponentElement } from "../../internal/utils.js";
 import { AILabel } from "../AILabel/index.js";
 import TableDecoratorRow from "./TableDecoratorRow.js";
 import TableSlugRow from "./TableSlugRow.js";
-import classNames from "classnames";
 import { Children, forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableRow.tsx
@@ -28,7 +28,7 @@ const TableRow = forwardRef((props, ref) => {
 		if (isComponentElement(child, TableSlugRow)) return !!child.props.slug;
 		return isComponentElement(child, TableDecoratorRow) && isComponentElement(child.props.decorator, AILabel);
 	});
-	const className = classNames(props.className, {
+	const className = cx(props.className, {
 		[`${prefix}--data-table--selected`]: isSelected,
 		[`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
 	});