@carbon/react 1.112.0-rc.0 → 1.113.0-rc.0

package/es/components/Pagination/Pagination.js

@@ -8,11 +8,12 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { IconButton } from "../IconButton/index.js";
+import { clamp } from "../../internal/clamp.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import Select_default from "../Select/index.js";
 import SelectItem_default from "../SelectItem/index.js";
-import classNames from "classnames";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight } from "@carbon/icons-react";
@@ -52,7 +53,7 @@ const getPageSize = (pageSizes, pageSize) => {
 	}
 	return pageSizes[0].value;
 };
-const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardTextTooltipPosition = "top", className: customClassName = "", disabled = false, forwardText = "Next page", forwardTextTooltipPosition = "top", id, isLastPage = false, itemText = (min, max) => `${min}–${max} items`, itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemsPerPageText = "Items per page:", onChange, pageNumberText: _pageNumberText, pageRangeText = (_current, total) => `of ${total} ${total === 1 ? "page" : "pages"}`, pageSelectLabelText = (total) => `Page of ${total} ${total === 1 ? "page" : "pages"}`, page: controlledPage = 1, pageInputDisabled, pageSize: controlledPageSize, pageSizeInputDisabled, pageSizes: controlledPageSizes, pageText = (page) => `page ${page}`, pagesUnknown = false, size = "md", totalItems, ...rest }, ref) => {
+const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardTextTooltipPosition = "top", className: customClassName = "", disabled = false, forwardText = "Next page", forwardTextTooltipPosition = "top", id, isLastPage = false, itemText = (min, max) => `${min}–${max} items`, itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemsPerPageText = "Items per page:", onChange, pageNumberText: _pageNumberText, pageRangeText = (_current, total) => `of ${total} ${total === 1 ? "page" : "pages"}`, pageSelectLabelText = (total) => `Page of ${total} ${total === 1 ? "page" : "pages"}`, page: controlledPage = 1, pageInputDisabled, renderPageSelect, pageSize: controlledPageSize, pageSizeInputDisabled, pageSizes: controlledPageSizes, pageText = (page) => `page ${page}`, pagesUnknown = false, size = "md", totalItems, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const inputId = useFallbackId(id?.toString());
 	const backBtnRef = useRef(null);
@@ -67,7 +68,7 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 	const [pageSize, setPageSize] = useState(() => {
 		return getPageSize(normalizedControlledPageSizes, controlledPageSize);
 	});
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--pagination`]: true,
 		[`${prefix}--pagination--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size,
@@ -75,18 +76,18 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 	});
 	const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
 	const backButtonDisabled = disabled || page === 1;
-	const backButtonClasses = classNames({
+	const backButtonClasses = cx({
 		[`${prefix}--pagination__button`]: true,
 		[`${prefix}--pagination__button--backward`]: true,
 		[`${prefix}--pagination__button--no-index`]: backButtonDisabled
 	});
 	const forwardButtonDisabled = disabled || page === totalPages && !pagesUnknown;
-	const forwardButtonClasses = classNames({
+	const forwardButtonClasses = cx({
 		[`${prefix}--pagination__button`]: true,
 		[`${prefix}--pagination__button--forward`]: true,
 		[`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
 	});
-	const selectItems = renderSelectItems(totalPages);
+	const selectItems = renderPageSelect ? [] : renderSelectItems(totalPages);
 	const focusMap = {
 		backward: backBtnRef,
 		forward: forwardBtnRef
@@ -140,7 +141,8 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 	]);
 	useEffect(() => {
 		if (controlledPageSize === prevControlledPageSize) return;
-		setPageSize(getPageSize(normalizedControlledPageSizes, controlledPageSize));
+		const nextPageSize = getPageSize(normalizedControlledPageSizes, controlledPageSize);
+		setPageSize(nextPageSize);
 	}, [
 		controlledPageSize,
 		normalizedControlledPageSizes,
@@ -165,6 +167,18 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 			});
 		}
 	}
+	function handleSetPage(nextPage) {
+		if (disabled || pageInputDisabled) return;
+		const numericPage = Number(nextPage);
+		if (!Number.isInteger(numericPage)) return;
+		const clamped = clamp(numericPage, 1, totalPages);
+		if (clamped === page) return;
+		setPage(clamped);
+		if (onChange) onChange({
+			page: clamped,
+			pageSize
+		});
+	}
 	function incrementPage() {
 		const nextPage = page + 1;
 		setPage(nextPage);
@@ -223,7 +237,13 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 			children: [pagesUnknown ? /* @__PURE__ */ jsx("span", {
 				className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`,
 				children: pageText(page)
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Select_default, {
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [renderPageSelect ? renderPageSelect({
+				currentPage: page,
+				totalPages,
+				currentPageSize: pageSize,
+				pageSelectLabelText: pageSelectLabelText(totalPages),
+				onSetPage: handleSetPage
+			}) : /* @__PURE__ */ jsx(Select_default, {
 				id: `${prefix}-pagination-select-${inputId}-right`,
 				className: `${prefix}--select__page-number`,
 				labelText: pageSelectLabelText(totalPages),
@@ -341,6 +361,11 @@ Pagination.propTypes = {
 	*/
 	pageSelectLabelText: PropTypes.func,
 	/**
+	* Provide a custom render function for the page-selection control.
+	* When provided, the default `<Select>` is replaced with the returned node.
+	*/
+	renderPageSelect: PropTypes.func,
+	/**
 	* The number dictating how many items a page contains.
 	*/
 	pageSize: PropTypes.number,

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

@@ -1,4 +1,8 @@
 export default PageSelector;
+/**
+ * @deprecated Use `Pagination` with the `renderPageSelect` prop instead.
+ * `unstable_PageSelector` / `preview_PageSelector` will be removed in v12.
+ */
 declare function PageSelector({ className, currentPage, id, labelText, totalPages, ...other }: {
     [x: string]: any;
     className?: null | undefined;

package/es/components/Pagination/experimental/PageSelector.js

@@ -9,14 +9,27 @@ import { usePrefix } from "../../../internal/usePrefix.js";
 import { useId } from "../../../internal/useId.js";
 import Select_default from "../../Select/index.js";
 import SelectItem_default from "../../SelectItem/index.js";
-import classNames from "classnames";
-import "react";
+import { useEffect } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Pagination/experimental/PageSelector.js
+/**
+* Copyright IBM Corp. 2016, 2023
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* @deprecated Use `Pagination` with the `renderPageSelect` prop instead.
+* `unstable_PageSelector` / `preview_PageSelector` will be removed in v12.
+*/
 function PageSelector({ className = null, currentPage, id = 1, labelText = "Current page number", totalPages, ...other }) {
 	const namespace = `${usePrefix()}--unstable-pagination__page-selector`;
 	const instanceId = `${namespace}__select-${useId()}`;
+	useEffect(() => {
+		console.warn("[Carbon] `unstable_PageSelector` / `preview_PageSelector` is deprecated and will be removed in v12. Use `Pagination` with the `renderPageSelect` prop instead.");
+	}, []);
 	const renderPages = (total) => {
 		const pages = [];
 		for (let counter = 1; counter <= total; counter += 1) pages.push(/* @__PURE__ */ jsx(SelectItem_default, {
@@ -26,7 +39,7 @@ function PageSelector({ className = null, currentPage, id = 1, labelText = "Curr
 		return pages;
 	};
 	return /* @__PURE__ */ jsx(Select_default, {
-		className: classNames(namespace, className),
+		className: cx(namespace, className),
 		hideLabel: true,
 		id: instanceId || id,
 		inline: true,

package/es/components/Pagination/experimental/Pagination-story.d.ts

@@ -4,111 +4,146 @@ declare namespace _default {
     export namespace subcomponents {
         export { PageSelector };
     }
-    export let decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
-}
-export default _default;
-export function WithAPageSelector(): import("react/jsx-runtime").JSX.Element;
-export namespace WithAPageSelector {
-    let storyName: string;
-}
-export function WithNoSizerChildInputOrChildSelector(): import("react/jsx-runtime").JSX.Element;
-export namespace WithNoSizerChildInputOrChildSelector {
-    let storyName_1: string;
-    export { storyName_1 as storyName };
-}
-export function Playground(args: any): import("react/jsx-runtime").JSX.Element;
-export namespace Playground {
-    namespace argTypes {
-        namespace className {
-            let control: boolean;
+    export namespace argTypes {
+        namespace backwardText {
+            namespace control {
+                let type: string;
+            }
         }
         namespace children {
             let control_1: boolean;
             export { control_1 as control };
         }
-        namespace id {
+        namespace className {
             let control_2: boolean;
             export { control_2 as control };
         }
-        namespace itemText {
-            let control_3: boolean;
-            export { control_3 as control };
-        }
-        namespace forwardText {
-            export namespace control_4 {
-                let type: string;
-            }
-            export { control_4 as control };
-            export let defaultValue: string;
-        }
         namespace disabled {
-            export namespace control_5 {
+            export namespace control_3 {
                 let type_1: string;
                 export { type_1 as type };
             }
-            export { control_5 as control };
-            let defaultValue_1: string;
-            export { defaultValue_1 as defaultValue };
-        }
-        namespace itemRangeText {
-            let control_6: boolean;
-            export { control_6 as control };
+            export { control_3 as control };
         }
-        namespace itemsPerPageText {
-            export namespace control_7 {
+        namespace forwardText {
+            export namespace control_4 {
                 let type_2: string;
                 export { type_2 as type };
             }
-            export { control_7 as control };
-            let defaultValue_2: string;
-            export { defaultValue_2 as defaultValue };
+            export { control_4 as control };
+        }
+        namespace id {
+            let control_5: boolean;
+            export { control_5 as control };
         }
         namespace initialPage {
-            export namespace control_8 {
+            export namespace control_6 {
                 let type_3: string;
                 export { type_3 as type };
             }
-            export { control_8 as control };
-            let defaultValue_3: number;
-            export { defaultValue_3 as defaultValue };
+            export { control_6 as control };
         }
-        namespace pageSize {
-            export namespace control_9 {
+        namespace itemRangeText {
+            let control_7: boolean;
+            export { control_7 as control };
+        }
+        namespace itemsPerPageText {
+            export namespace control_8 {
                 let type_4: string;
                 export { type_4 as type };
             }
+            export { control_8 as control };
+        }
+        namespace itemText {
+            let control_9: boolean;
             export { control_9 as control };
-            let defaultValue_4: number;
-            export { defaultValue_4 as defaultValue };
         }
-        namespace pageSizes {
-            export namespace control_10 {
+        namespace onChange {
+            let action: string;
+        }
+        namespace pageRangeText {
+            let control_10: boolean;
+            export { control_10 as control };
+        }
+        namespace pageSize {
+            export namespace control_11 {
                 let type_5: string;
                 export { type_5 as type };
             }
-            export { control_10 as control };
-            let defaultValue_5: number[];
-            export { defaultValue_5 as defaultValue };
+            export { control_11 as control };
         }
-        namespace pagesUnknown {
-            export namespace control_11 {
+        namespace pageSizes {
+            export namespace control_12 {
                 let type_6: string;
                 export { type_6 as type };
             }
-            export { control_11 as control };
-            let defaultValue_6: string;
-            export { defaultValue_6 as defaultValue };
+            export { control_12 as control };
         }
-        namespace totalItems {
-            export namespace control_12 {
+        namespace pagesUnknown {
+            export namespace control_13 {
                 let type_7: string;
                 export { type_7 as type };
             }
-            export { control_12 as control };
-            let defaultValue_7: number;
-            export { defaultValue_7 as defaultValue };
+            export { control_13 as control };
+        }
+        namespace pageText {
+            let control_14: boolean;
+            export { control_14 as control };
+        }
+        namespace totalItems {
+            export namespace control_15 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_15 as control };
+        }
+    }
+    export let decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export function WithAPageSelector(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace WithAPageSelector {
+    let storyName: string;
+    namespace args {
+        let backwardText_1: string;
+        export { backwardText_1 as backwardText };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let forwardText_1: string;
+        export { forwardText_1 as forwardText };
+        let initialPage_1: number;
+        export { initialPage_1 as initialPage };
+        let itemsPerPageText_1: string;
+        export { itemsPerPageText_1 as itemsPerPageText };
+        let pageSize_1: number;
+        export { pageSize_1 as pageSize };
+        let pageSizes_1: number[];
+        export { pageSizes_1 as pageSizes };
+        let pagesUnknown_1: boolean;
+        export { pagesUnknown_1 as pagesUnknown };
+        let totalItems_1: number;
+        export { totalItems_1 as totalItems };
+    }
+}
+export function WithNoSizerChildInputOrChildSelector(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace WithNoSizerChildInputOrChildSelector {
+    let storyName_1: string;
+    export { storyName_1 as storyName };
+    export namespace args_1 {
+        let pageSizes_2: undefined;
+        export { pageSizes_2 as pageSizes };
+    }
+    export { args_1 as args };
+    export namespace parameters {
+        namespace controls {
+            let exclude: string[];
         }
     }
 }
+export function Playground(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace Playground {
+    export namespace args_2 { }
+    export { args_2 as args };
+}
 import { preview_Pagination as Pagination } from '../../..';
 import { preview_PageSelector as PageSelector } from '../../..';

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

@@ -1,4 +1,8 @@
 export default Pagination;
+/**
+ * @deprecated Use the stable `Pagination` component with the `renderPageSelect`
+ * prop instead. `unstable_Pagination` / `preview_Pagination` will be removed in v12.
+ */
 declare function Pagination({ backwardText, children, className, disabled, forwardText, id, initialPage, itemsPerPageText, itemRangeText, itemText, onChange, pageRangeText, pageSize, pageSizes, pageText, pagesUnknown, totalItems, ...other }: {
     [x: string]: any;
     backwardText?: string | undefined;

package/es/components/Pagination/experimental/Pagination.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../../internal/usePrefix.js";
 import { IconButton } from "../../IconButton/index.js";
 import Select_default from "../../Select/index.js";
 import SelectItem_default from "../../SelectItem/index.js";
-import classNames from "classnames";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight } from "@carbon/icons-react";
@@ -21,10 +21,17 @@ import { CaretLeft, CaretRight } from "@carbon/icons-react";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/**
+* @deprecated Use the stable `Pagination` component with the `renderPageSelect`
+* prop instead. `unstable_Pagination` / `preview_Pagination` will be removed in v12.
+*/
 function Pagination({ backwardText = "Previous page", children = void 0, className = null, disabled = false, forwardText = "Next page", id = 1, initialPage = 1, itemsPerPageText = "Items per page:", itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemText = (min, max) => `${min}–${max} items`, onChange, pageRangeText = (current, total) => `${current} of ${total} pages`, pageSize = 10, pageSizes = void 0, pageText = (page) => `page ${page}`, pagesUnknown = false, totalItems = void 0, ...other }) {
 	const [currentPage, setCurrentPage] = useState(initialPage);
 	const [currentPageSize, setCurrentPageSize] = useState(pageSize);
 	const prefix = usePrefix();
+	useEffect(() => {
+		console.warn("[Carbon] `unstable_Pagination` / `preview_Pagination` is deprecated and will be removed in v12. Use the stable `Pagination` component with the `renderPageSelect` prop instead.");
+	}, []);
 	const totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : void 0;
 	const backButtonDisabled = disabled || currentPage === 1;
 	const forwardButtonDisabled = disabled || currentPage === totalPages;
@@ -49,7 +56,7 @@ function Pagination({ backwardText = "Previous page", children = void 0, classNa
 	}
 	const namespace = `${prefix}--unstable-pagination`;
 	return /* @__PURE__ */ jsxs("section", {
-		className: classNames(namespace, className),
+		className: cx(namespace, className),
 		...other,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: `${namespace}__left`,
@@ -113,7 +120,7 @@ function Pagination({ backwardText = "Previous page", children = void 0, classNa
 					align: "top",
 					disabled: backButtonDisabled,
 					kind: "ghost",
-					className: classNames(`${namespace}__button`, `${namespace}__button--backward`, { [`${namespace}__button--no-index`]: backButtonDisabled }),
+					className: cx(`${namespace}__button`, `${namespace}__button--backward`, { [`${namespace}__button--no-index`]: backButtonDisabled }),
 					label: backwardText,
 					onClick: () => decrementPage(),
 					children: /* @__PURE__ */ jsx(CaretLeft, {})
@@ -121,7 +128,7 @@ function Pagination({ backwardText = "Previous page", children = void 0, classNa
 					align: "top-right",
 					disabled: forwardButtonDisabled,
 					kind: "ghost",
-					className: classNames(`${namespace}__button`, `${namespace}__button--forward`, { [`${namespace}__button--no-index`]: forwardButtonDisabled }),
+					className: cx(`${namespace}__button`, `${namespace}__button--forward`, { [`${namespace}__button--no-index`]: forwardButtonDisabled }),
 					label: forwardText,
 					onClick: () => incrementPage(),
 					children: /* @__PURE__ */ jsx(CaretRight, {})

package/es/components/PaginationNav/PaginationNav.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { IconButton } from "../IconButton/index.js";
 import { clamp } from "../../internal/clamp.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
-import classNames from "classnames";
 import React, { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight, OverflowMenuHorizontal } from "@carbon/icons-react";
@@ -89,7 +89,7 @@ function PaginationItem({ page, isActive, onClick, translateWithId: t = defaultT
 		className: `${prefix}--pagination-nav__list-item`,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: classNames(`${prefix}--pagination-nav__page`, { [`${prefix}--pagination-nav__page--active`]: isActive }),
+			className: cx(`${prefix}--pagination-nav__page`, { [`${prefix}--pagination-nav__page--active`]: isActive }),
 			onClick,
 			"data-page": page,
 			"aria-current": isActive ? "page" : void 0,
@@ -207,18 +207,20 @@ const PaginationNav = React.forwardRef(({ className, onChange = () => {}, totalI
 		size
 	]);
 	useEffect(() => {
-		if (pageWouldBeHidden(currentPage)) if (currentPage - (prevPage || 0) > 0) setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, itemsDisplayedOnPage - 3));
-		else setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, itemsDisplayedOnPage > 4 ? 2 : 1));
+		if (pageWouldBeHidden(currentPage)) if (currentPage - (prevPage || 0) > 0) {
+			const splitPoint = itemsDisplayedOnPage - 3;
+			setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, splitPoint));
+		} else setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, itemsDisplayedOnPage > 4 ? 2 : 1));
 	}, [currentPage]);
 	useEffect(() => {
 		setIsOverFlowDisabled(disableOverflow);
 	}, [disableOverflow]);
-	const classNames$1 = classNames(`${prefix}--pagination-nav`, className, { [`${prefix}--layout--size-${size}`]: size });
+	const classNames = cx(`${prefix}--pagination-nav`, className, { [`${prefix}--layout--size-${size}`]: size });
 	const backwardButtonDisabled = !loop && currentPage === 0;
 	const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
 	const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
 	return /* @__PURE__ */ jsxs("nav", {
-		className: classNames$1,
+		className: classNames,
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ jsxs("ul", {

package/es/components/Popover/index.js

@@ -6,6 +6,7 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { isComponentElement } from "../../internal/utils.js";
@@ -13,8 +14,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useEvent, useWindowEvent } from "../../internal/useEvent.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
-import classNames from "classnames";
 import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, hide, offset, useFloating } from "@floating-ui/react";
@@ -72,6 +73,13 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 			if (isOutsideFloating && !isFocusableWrapper) onRequestClose?.();
 		}
 	});
+	useWindowEvent("keydown", (event) => {
+		if (!open || event.key !== "Escape" || event.defaultPrevented) return;
+		const target = event.target;
+		if (!(target instanceof Element) || target.closest(`.${prefix}--popover-content`) !== refs.floating.current) return;
+		onRequestClose?.();
+		(popover.current?.querySelector(selectorTabbable))?.focus();
+	});
 	useWindowEvent("click", ({ target }) => {
 		if (open && target instanceof Node && !popover.current?.contains(target) && !isTargetInDatePickerInsidePopover(target)) onRequestClose?.();
 	});
@@ -201,7 +209,7 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 	]);
 	const ref = useMergedRefs([forwardRef, popover]);
 	const currentAlignment = autoAlign && placement !== align ? placement : align;
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--popover-container`]: true,
 		[`${prefix}--popover--caret`]: caret,
 		[`${prefix}--popover--drop-shadow`]: dropShadow,
@@ -231,7 +239,7 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 		if (React.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
 			const className = (item?.props)?.className;
 			const ref = (item?.props).ref;
-			const tabTipClasses = classNames(`${prefix}--popover--tab-tip__button`, className);
+			const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
 			return React.cloneElement(item, {
 				className: isTabTip && item?.type === "button" ? tabTipClasses : className || "",
 				ref: (node) => {
@@ -375,17 +383,17 @@ const PopoverContent = forwardRef((props, forwardRef) => {
 		...rest,
 		className: `${prefix}--popover`,
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: classNames(`${prefix}--popover-content`, className),
+			className: cx(`${prefix}--popover-content`, className),
 			ref,
 			children: [children, enableFloatingStyles && /* @__PURE__ */ jsx("span", {
-				className: classNames({
+				className: cx({
 					[`${prefix}--popover-caret`]: true,
 					[`${prefix}--popover--auto-align`]: true
 				}),
 				ref: caretRef
 			})]
 		}), !enableFloatingStyles && /* @__PURE__ */ jsx("span", {
-			className: classNames({ [`${prefix}--popover-caret`]: true }),
+			className: cx({ [`${prefix}--popover-caret`]: true }),
 			ref: caretRef
 		})]
 	});

package/es/components/ProgressBar/ProgressBar.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.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 { CheckmarkFilled, ErrorFilled } from "@carbon/icons-react";
@@ -34,12 +34,12 @@ function ProgressBar({ className, helperText, hideLabel, label, max = 100, size
 	if (isError) cappedValue = 0;
 	else if (isFinished) cappedValue = max;
 	const percentage = (cappedValue ?? NaN) / max;
-	const wrapperClasses = classNames(`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
+	const wrapperClasses = cx(`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
 		[`${prefix}--progress-bar--indeterminate`]: indeterminate,
 		[`${prefix}--progress-bar--finished`]: isFinished,
 		[`${prefix}--progress-bar--error`]: isError
 	}, className);
-	const labelClasses = classNames(`${prefix}--progress-bar__label`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const labelClasses = cx(`${prefix}--progress-bar__label`, { [`${prefix}--visually-hidden`]: hideLabel });
 	let StatusIcon = null;
 	if (isError) StatusIcon = React.forwardRef((props, ref) => {
 		return /* @__PURE__ */ jsx(ErrorFilled, {

package/es/components/ProgressIndicator/ProgressIndicator.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";
 import { CircleDash } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ function Step() {
 function ProgressIndicatorSkeleton({ className, vertical, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("ul", {
-		className: classNames(`${prefix}--progress`, `${prefix}--skeleton`, { [`${prefix}--progress--vertical`]: vertical }, className),
+		className: cx(`${prefix}--progress`, `${prefix}--skeleton`, { [`${prefix}--progress--vertical`]: vertical }, className),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(Step, {}),
@@ -56,4 +56,4 @@ ProgressIndicatorSkeleton.propTypes = {
 	vertical: PropTypes.bool
 };
 //#endregion
-export { ProgressIndicatorSkeleton as default };
+export { ProgressIndicatorSkeleton, ProgressIndicatorSkeleton as default };

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkOutline, CircleDash, Incomplete, Warning } from "@carbon/icons-react";
@@ -39,7 +39,7 @@ const defaultTranslateWithId = (messageId) => {
 function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex = 0, onChange, spaceEqually, vertical, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("ul", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--progress`]: true,
 			[`${prefix}--progress--vertical`]: vertical,
 			[`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
@@ -98,7 +98,7 @@ ProgressIndicator.propTypes = {
 };
 function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t = defaultTranslateWithId, ...rest }) {
 	const prefix = usePrefix();
-	const classes = classNames({
+	const classes = cx({
 		[`${prefix}--progress-step`]: true,
 		[`${prefix}--progress-step--current`]: current,
 		[`${prefix}--progress-step--complete`]: complete,
@@ -126,7 +126,7 @@ function ProgressStep({ label, description, className, current, complete, invali
 		className: classes,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: classNames(`${prefix}--progress-step-button`, { [`${prefix}--progress-step-button--unclickable`]: !onClick || current }),
+			className: cx(`${prefix}--progress-step-button`, { [`${prefix}--progress-step-button--unclickable`]: !onClick || current }),
 			disabled,
 			"aria-disabled": disabled,
 			tabIndex: disabled ? -1 : 0,