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

package/es/components/Notification/Notification.js

@@ -5,22 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match, matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useInteractiveChildrenNeedDescription, useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";
 import Button_default from "../Button/index.js";
 import { wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
-import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, Close, ErrorFilled, InformationFilled, InformationSquareFilled, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -49,7 +49,7 @@ function useEscapeToClose(ref, callback, override = true) {
 }
 function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }) {
 	return /* @__PURE__ */ jsx(Button_default, {
-		className: classNames(customClassName, { [`${usePrefix()}--actionable-notification__action-button`]: true }),
+		className: cx(customClassName, { [`${usePrefix()}--actionable-notification__action-button`]: true }),
 		kind: inline ? "ghost" : "tertiary",
 		onClick,
 		size: "sm",
@@ -77,8 +77,8 @@ NotificationActionButton.propTypes = {
 };
 function NotificationButton({ "aria-label": ariaLabel = "close notification", ariaLabel: deprecatedAriaLabel, className, type = "button", renderIcon: IconTag = Close, name, notificationType = "toast", ...rest }) {
 	const prefix = usePrefix();
-	const buttonClassName = classNames(className, { [`${prefix}--${notificationType}-notification__close-button`]: notificationType });
-	const iconClassName = classNames({ [`${prefix}--${notificationType}-notification__close-icon`]: notificationType });
+	const buttonClassName = cx(className, { [`${prefix}--${notificationType}-notification__close-button`]: notificationType });
+	const iconClassName = cx({ [`${prefix}--${notificationType}-notification__close-icon`]: notificationType });
 	return /* @__PURE__ */ jsx("button", {
 		...rest,
 		type,
@@ -164,7 +164,7 @@ NotificationIcon.propTypes = {
 function ToastNotification({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, role = "status", onClose, onCloseButtonClick = noopFn, statusIconDescription, className, children, kind = "error", lowContrast, hideCloseButton = false, timeout = 0, title, caption, subtitle, ...rest }) {
 	const [isOpen, setIsOpen] = useState(true);
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--toast-notification`]: true,
 		[`${prefix}--toast-notification--low-contrast`]: lowContrast,
 		[`${prefix}--toast-notification--${kind}`]: kind
@@ -313,7 +313,7 @@ ToastNotification.propTypes = {
 function InlineNotification({ ["aria-label"]: ariaLabel, children, title, subtitle, role = "status", onClose, onCloseButtonClick = noopFn, statusIconDescription, className, kind = "error", lowContrast, hideCloseButton = false, ...rest }) {
 	const [isOpen, setIsOpen] = useState(true);
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--inline-notification`]: true,
 		[`${prefix}--inline-notification--low-contrast`]: lowContrast,
 		[`${prefix}--inline-notification--${kind}`]: kind,
@@ -432,7 +432,7 @@ function ActionableNotification({ actionButtonLabel, ["aria-label"]: ariaLabel,
 	const prefix = usePrefix();
 	const id = useId("actionable-notification");
 	const subtitleId = useId("actionable-notification-subtitle");
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--actionable-notification`]: true,
 		[`${prefix}--actionable-notification--toast`]: !inline,
 		[`${prefix}--actionable-notification--low-contrast`]: lowContrast,
@@ -648,7 +648,7 @@ const propMappingFunction = (deprecatedValue) => {
 };
 function Callout({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind = "info", lowContrast, ...rest }) {
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--actionable-notification`]: true,
 		[`${prefix}--actionable-notification--low-contrast`]: lowContrast,
 		[`${prefix}--actionable-notification--${kind}`]: kind,

package/es/components/NumberInput/NumberInput.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/NumberInput/NumberInput.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function NumberInputSkeleton({ hideLabel, className, size = "md", ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		...rest,
 		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}` })]
 	});

package/es/components/NumberInput/NumberInput.js

@@ -18,8 +18,8 @@ import { FormContext } from "../FluidForm/FormContext.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { clamp } from "../../internal/clamp.js";
 import { NumberFormatOptionsPropType } from "./NumberFormatPropTypes.js";
-import classNames from "classnames";
 import React, { cloneElement, 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 { Add, Subtract } from "@carbon/icons-react";
@@ -150,13 +150,22 @@ const validateNumberSeparators = (input, locale) => {
 	const sign = "[\\-\\u2212]?";
 	const scientific = `([eE][+-]?${digit}+)?`;
 	const usesGrouping = group && (groupSeparator?.trim() === "" ? /[\u00A0\u202F\s]/.test(input) : groupSeparator === "," || groupSeparator === "٬" ? /[,٬]/.test(input) : groupSeparator ? input.includes(groupSeparator) : false);
+	const isIndianLocale = locale === "en-IN" || locale.toLowerCase().endsWith("-in");
 	const scientificMatch = input?.match(/^([^eE]+)([eE][+-]?.*)?$/);
 	const baseNumber = scientificMatch ? scientificMatch[1] : input;
 	let integerPart;
 	if (decimalSeparator === "." || decimalSeparator === "٫") integerPart = baseNumber?.split(/[.,]/)[0];
 	else integerPart = baseNumber?.split(decimalSeparator)[0];
-	if (!(usesGrouping ? new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}(${group}${digit}{3})+)$`) : new RegExp(`^${sign}${digit}+$`)).test(integerPart)) return false;
-	return new RegExp(`^${sign}${digit}+` + (usesGrouping ? `(${group}${digit}{3})*` : "") + `(${decimal}${digit}+)?${scientific}$`).test(input);
+	let integerRegex;
+	if (!usesGrouping) integerRegex = new RegExp(`^${sign}${digit}+$`);
+	else if (isIndianLocale) integerRegex = new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}${group}${digit}{3}|${digit}{1,2}(${group}${digit}{2})+${group}${digit}{3})$`);
+	else integerRegex = new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}(${group}${digit}{3})+)$`);
+	if (!integerRegex.test(integerPart)) return false;
+	let fullRegex;
+	if (!usesGrouping) fullRegex = new RegExp(`^${sign}${digit}+(${decimal}${digit}+)?${scientific}$`);
+	else if (isIndianLocale) fullRegex = new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}${group}${digit}{3}|${digit}{1,2}(${group}${digit}{2})+${group}${digit}{3})(${decimal}${digit}+)?${scientific}$`);
+	else fullRegex = new RegExp(`^${sign}${digit}{1,3}(${group}${digit}{3})*(${decimal}${digit}+)?${scientific}$`);
+	return fullRegex.test(input);
 };
 const NumberInput = React.forwardRef((props, forwardRef) => {
 	const { allowEmpty = false, className: customClassName, decorator, disabled = false, disableWheel: disableWheelProp = false, formatOptions, helperText = "", hideLabel = false, hideSteppers, iconDescription, id, inputMode = "decimal", invalid = false, invalidText, label, light, locale = "en-US", max, min, onBlur, onStepperBlur, onChange, onClick, onKeyUp, pattern = "[0-9]*", readOnly, size = "md", slug, step = 1, translateWithId: t = defaultTranslateWithId, type = "number", defaultValue = type === "number" ? 0 : NaN, validate, warn = false, warnText = "", stepStartValue = 0, value: controlledValue, ...rest } = props;
@@ -214,7 +223,7 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 	]);
 	const inputRef = useRef(null);
 	const ref = useMergedRefs([forwardRef, inputRef]);
-	const numberInputClasses = classNames({
+	const numberInputClasses = cx({
 		[`${prefix}--number`]: true,
 		[`${prefix}--number--helpertext`]: true,
 		[`${prefix}--number--readonly`]: readOnly,
@@ -241,12 +250,12 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 		warnText
 	});
 	const [incrementNumLabel, decrementNumLabel] = [t("increment.number"), t("decrement.number")];
-	const wrapperClasses = classNames(`${prefix}--number__input-wrapper`, {
+	const wrapperClasses = cx(`${prefix}--number__input-wrapper`, {
 		[`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
 		[`${prefix}--number__input-wrapper--slug`]: slug,
 		[`${prefix}--number__input-wrapper--decorator`]: decorator
 	});
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--number__invalid--warning`]: normalizedProps.warn
 	});
@@ -283,7 +292,7 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 		if ("type" in evt.target && evt.target.type === "button") setIsFocused(false);
 		else setIsFocused(evt.type === "focus");
 	};
-	const outerElementClasses = classNames(`${prefix}--form-item`, {
+	const outerElementClasses = cx(`${prefix}--form-item`, {
 		...customClassName ? { [customClassName]: true } : {},
 		[`${prefix}--number-input--fluid--invalid`]: isFluid && normalizedProps.invalid,
 		[`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
@@ -410,7 +419,8 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 										onBlur(e, value);
 										return;
 									}
-									onBlur(e, parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue));
+									const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+									onBlur(e, parsedTextValue);
 								}
 							},
 							pattern,
@@ -658,7 +668,7 @@ NumberInput.propTypes = {
 };
 const Label = ({ disabled, id, hideLabel, label }) => {
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--label`]: true,
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
@@ -673,7 +683,7 @@ const Label = ({ disabled, id, hideLabel, label }) => {
 };
 const HelperText = ({ disabled, description, id }) => {
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const className = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
 	if (description) return /* @__PURE__ */ jsx(Text, {
 		as: "div",
 		id,
@@ -728,4 +738,4 @@ function disableWheel(e) {
 	e.preventDefault();
 }
 //#endregion
-export { NumberInput, validateNumberSeparators };
+export { NumberInput, parseNumberWithLocale, validateNumberSeparators };

package/es/components/OrderedList/OrderedList.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/OrderedList/OrderedList.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 function OrderedList({ className, nested = false, native = false, isExpressive = false, ...other }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("ol", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--list--ordered`]: !native,
 			[`${prefix}--list--ordered--native`]: native,
 			[`${prefix}--list--nested`]: nested,

package/es/components/OverflowMenu/OverflowMenu.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { PrefixContext } from "../../internal/usePrefix.js";
 import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Escape, Tab } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
 import { setupGetInstanceId } from "../../tools/setupGetInstanceId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
@@ -17,8 +17,8 @@ import { IconButton } from "../IconButton/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { DIRECTION_BOTTOM, FloatingMenu } from "../../internal/FloatingMenu.js";
 import { useOutsideClick } from "../../internal/useOutsideClick.js";
-import classNames from "classnames";
 import React, { Children, cloneElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OverflowMenuVertical } from "@carbon/icons-react";
@@ -231,21 +231,21 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 		return document.body;
 	};
 	const menuBodyId = `overflow-menu-${instanceId.current}__menu-body`;
-	const overflowMenuClasses = classNames(className, `${prefix}--overflow-menu`, {
+	const overflowMenuClasses = cx(className, `${prefix}--overflow-menu`, {
 		[`${prefix}--overflow-menu--open`]: open,
 		[`${prefix}--overflow-menu--light`]: light,
 		[`${prefix}--overflow-menu--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size
 	});
-	const overflowMenuOptionsClasses = classNames(menuOptionsClass, `${prefix}--overflow-menu-options`, {
+	const overflowMenuOptionsClasses = cx(menuOptionsClass, `${prefix}--overflow-menu-options`, {
 		[`${prefix}--overflow-menu--flip`]: flipped,
 		[`${prefix}--overflow-menu-options--open`]: open,
 		[`${prefix}--overflow-menu-options--light`]: light,
 		[`${prefix}--overflow-menu-options--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size
 	});
-	const overflowMenuIconClasses = classNames(`${prefix}--overflow-menu__icon`, iconClass);
-	const overflowMenuWrapperClasses = classNames(`${prefix}--overflow-menu__wrapper`);
+	const overflowMenuIconClasses = cx(`${prefix}--overflow-menu__icon`, iconClass);
+	const overflowMenuWrapperClasses = cx(`${prefix}--overflow-menu__wrapper`);
 	const childrenWithProps = Children.toArray(children).map((child, index) => {
 		if (isValidElement(child)) {
 			const childElement = child;
@@ -454,4 +454,4 @@ OverflowMenu.propTypes = {
 	])
 };
 //#endregion
-export { OverflowMenu as default };
+export { OverflowMenu, OverflowMenu as default, getMenuOffset };

package/es/components/OverflowMenu/index.js

@@ -7,7 +7,7 @@
 
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { OverflowMenu as OverflowMenu$1 } from "./next/index.js";
-import OverflowMenu$2 from "./OverflowMenu.js";
+import { OverflowMenu as OverflowMenu$2 } from "./OverflowMenu.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/OverflowMenu/index.tsx
@@ -29,4 +29,4 @@ const OverflowMenu = forwardRef((props, ref) => {
 OverflowMenu.displayName = "OverflowMenu";
 OverflowMenu.propTypes = OverflowMenu$2.propTypes;
 //#endregion
-export { OverflowMenu as default };
+export { OverflowMenu, OverflowMenu as default };

package/es/components/OverflowMenu/next/index.js

@@ -14,8 +14,8 @@ import { IconButton } from "../../IconButton/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, { useEffect, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OverflowMenuVertical } from "@carbon/icons-react";
@@ -65,9 +65,9 @@ const OverflowMenu = React.forwardRef(({ autoAlign = false, children, className,
 	function handleTriggerClick() {
 		if (triggerRef.current) hookOnClick();
 	}
-	const containerClasses = classNames(className, `${prefix}--overflow-menu__container`, { [`${prefix}--autoalign`]: enableFloatingStyles });
-	const menuClasses = classNames(`${prefix}--overflow-menu__${menuAlignment}`);
-	const triggerClasses = classNames(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`, size !== defaultSize && `${prefix}--layout--size-${size}`);
+	const containerClasses = cx(className, `${prefix}--overflow-menu__container`, { [`${prefix}--autoalign`]: enableFloatingStyles });
+	const menuClasses = cx(`${prefix}--overflow-menu__${menuAlignment}`);
+	const triggerClasses = cx(`${prefix}--overflow-menu`, { [`${prefix}--overflow-menu--open`]: open }, size !== defaultSize && `${prefix}--overflow-menu--${size}`, size !== defaultSize && `${prefix}--layout--size-${size}`);
 	const floatingRef = mergeRefs(triggerRef, refs.setReference);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { ArrowDown, ArrowUp } 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 classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/OverflowMenuItem/OverflowMenuItem.tsx
@@ -40,8 +40,8 @@ const OverflowMenuItem = forwardRef((props, ref) => {
 		if (closeMenu) closeMenu();
 	}
 	warning(!!closeMenu, "`<OverflowMenuItem>` detected missing `closeMenu` prop. `closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.");
-	const overflowMenuBtnClasses = classNames(`${prefix}--overflow-menu-options__btn`, className);
-	const overflowMenuItemClasses = classNames(`${prefix}--overflow-menu-options__option`, {
+	const overflowMenuBtnClasses = cx(`${prefix}--overflow-menu-options__btn`, className);
+	const overflowMenuItemClasses = cx(`${prefix}--overflow-menu-options__option`, {
 		[`${prefix}--overflow-menu--divider`]: hasDivider,
 		[`${prefix}--overflow-menu-options__option--danger`]: isDelete,
 		[`${prefix}--overflow-menu-options__option--disabled`]: disabled

package/es/components/OverflowMenuItem/index.js

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

package/es/components/OverflowMenuV2/index.js

@@ -7,7 +7,7 @@
 
 import { warning } from "../../internal/warning.js";
 import { FeatureFlags } from "../FeatureFlags/index.js";
-import OverflowMenu from "../OverflowMenu/index.js";
+import { OverflowMenu } from "../OverflowMenu/index.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/OverflowMenuV2/index.js

package/es/components/PageHeader/PageHeader.js

@@ -14,15 +14,15 @@ import { Popover, PopoverContent } from "../Popover/index.js";
 import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import { MenuItem } from "../Menu/MenuItem.js";
 import { deprecateComponent } from "../../prop-types/deprecateComponent.js";
-import { GridAsGridComponent } from "../Grid/Grid.js";
+import { Grid as GridAsGridComponent } from "../Grid/Grid.js";
 import Column from "../Grid/Column.js";
 import { MenuButton } from "../MenuButton/index.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
 import Tag from "../Tag/Tag.js";
 import OperationalTag from "../Tag/OperationalTag.js";
 import useOverflowItems from "../../internal/useOverflowItems.js";
-import classNames from "classnames";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createOverflowHandler } from "@carbon/utilities";
@@ -47,7 +47,7 @@ const usePageHeaderDeprecation = (componentName) => {
 const PageHeader = React.forwardRef(({ className, children, ...other }, ref) => {
 	usePageHeaderDeprecation("PageHeader");
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames({ [`${usePrefix()}--page-header`]: true }, className),
+		className: cx({ [`${usePrefix()}--page-header`]: true }, className),
 		ref,
 		...other,
 		children
@@ -57,14 +57,14 @@ PageHeader.displayName = "PageHeader";
 const PageHeaderBreadcrumbBar = React.forwardRef(({ border = true, className, children, renderIcon: IconElement, contentActions, contentActionsFlush, pageActions, pageActionsFlush, ...other }, ref) => {
 	usePageHeaderDeprecation("PageHeaderBreadcrumbBar");
 	const prefix = usePrefix();
-	const classNames$1 = classNames({
+	const classNames = cx({
 		[`${prefix}--page-header__breadcrumb-bar`]: true,
 		[`${prefix}--page-header__breadcrumb-bar-border`]: border,
 		[`${prefix}--page-header__breadcrumb__actions-flush`]: pageActionsFlush
 	}, className);
-	const contentActionsClasses = classNames({ [`${prefix}--page-header__breadcrumb__content-actions`]: !contentActionsFlush });
+	const contentActionsClasses = cx({ [`${prefix}--page-header__breadcrumb__content-actions`]: !contentActionsFlush });
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$1,
+		className: classNames,
 		ref,
 		...other,
 		children: /* @__PURE__ */ jsx(GridAsGridComponent, { children: /* @__PURE__ */ jsx(Column, {
@@ -94,7 +94,7 @@ PageHeaderBreadcrumbBar.displayName = "PageHeaderBreadcrumbBar";
 const PageHeaderContent = React.forwardRef(({ className, children, title, renderIcon: IconElement, contextualActions, pageActions, ...other }, ref) => {
 	usePageHeaderDeprecation("PageHeaderContent");
 	const prefix = usePrefix();
-	const classNames$2 = classNames({ [`${prefix}--page-header__content`]: true }, className);
+	const classNames = cx({ [`${prefix}--page-header__content`]: true }, className);
 	const titleRef = useRef(null);
 	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
 	const isEllipsisActive = (element) => {
@@ -105,7 +105,7 @@ const PageHeaderContent = React.forwardRef(({ className, children, title, render
 		if (titleRef.current) isEllipsisActive(titleRef.current);
 	}, [title]);
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$2,
+		className: classNames,
 		ref,
 		...other,
 		children: /* @__PURE__ */ jsx(GridAsGridComponent, { children: /* @__PURE__ */ jsxs(Column, {
@@ -177,7 +177,7 @@ PageHeaderContent.propTypes = {
 };
 const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "Actions", actions, ...other }) => {
 	usePageHeaderDeprecation("PageHeaderContentPageActions");
-	const classNames$3 = classNames({ [`${usePrefix()}--page-header__content__page-actions`]: true }, className);
+	const classNames = cx({ [`${usePrefix()}--page-header__content__page-actions`]: true }, className);
 	const containerRef = useRef(null);
 	const offsetRef = useRef(null);
 	const [menuButtonVisibility, setMenuButtonVisibility] = useState(false);
@@ -200,7 +200,7 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 		});
 	}, []);
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$3,
+		className: classNames,
 		ref: containerRef,
 		...other,
 		children: actions && /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(actions) && /* @__PURE__ */ jsxs(Fragment, { children: [actions.map((action) => /* @__PURE__ */ jsx("div", { children: React.cloneElement(action.body, {
@@ -245,7 +245,7 @@ const PageHeaderContentText = ({ className, children, subtitle, ...other }) => {
 	usePageHeaderDeprecation("PageHeaderContentText");
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames({ [`${prefix}--page-header__content__body`]: true }, className),
+		className: cx({ [`${prefix}--page-header__content__body`]: true }, className),
 		...other,
 		children: [subtitle && /* @__PURE__ */ jsx(Text, {
 			as: "h3",
@@ -271,10 +271,10 @@ PageHeaderContentText.propTypes = {
 };
 const PageHeaderHeroImage = ({ className, children, ...other }) => {
 	usePageHeaderDeprecation("PageHeaderHeroImage");
-	const classNames$4 = classNames({ [`${usePrefix()}--page-header__hero-image`]: true }, className);
+	const classNames = cx({ [`${usePrefix()}--page-header__hero-image`]: true }, className);
 	const isLg = useMatchMedia(`(min-width: ${breakpoints.lg.width})`);
 	return /* @__PURE__ */ jsx(AspectRatio, {
-		className: classNames$4,
+		className: classNames,
 		...other,
 		ratio: isLg ? "2x1" : "3x2",
 		children
@@ -294,7 +294,7 @@ PageHeaderHeroImage.propTypes = {
 const PageHeaderTabBar = React.forwardRef(({ className, children, tags = [], ...other }, ref) => {
 	usePageHeaderDeprecation("PageHeaderTabBar");
 	const prefix = usePrefix();
-	const classNames$5 = classNames({ [`${prefix}--page-header__tab-bar`]: true }, className);
+	const classNames = cx({ [`${prefix}--page-header__tab-bar`]: true }, className);
 	const [openPopover, setOpenPopover] = useState(false);
 	const tagSize = tags[0]?.size || "md";
 	const instanceId = useId("PageHeaderTabBar");
@@ -355,7 +355,7 @@ const PageHeaderTabBar = React.forwardRef(({ className, children, tags = [], ...
 		})]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$5,
+		className: classNames,
 		ref,
 		...other,
 		children: /* @__PURE__ */ jsx(GridAsGridComponent, { children: /* @__PURE__ */ jsx(Column, {

package/es/components/PageHeader/index.js

@@ -25,4 +25,4 @@ var PageHeader_exports = /* @__PURE__ */ __exportAll({
 	TabBar: () => TabBar
 });
 //#endregion
-export { PageHeader_exports };
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeader_exports, Root, TabBar };

package/es/components/Pagination/Pagination.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import SkeletonText_default from "../SkeletonText/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/Pagination/Pagination.Skeleton.tsx
@@ -21,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function PaginationSkeleton({ className, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--pagination`, `${prefix}--skeleton`, className),
+		className: cx(`${prefix}--pagination`, `${prefix}--skeleton`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: `${prefix}--pagination__left`,
@@ -42,4 +42,4 @@ PaginationSkeleton.propTypes = {
 */
 className: PropTypes.string };
 //#endregion
-export { PaginationSkeleton as default };
+export { PaginationSkeleton, PaginationSkeleton as default };

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

@@ -81,6 +81,22 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * A function returning the label for the page select.
      */
     pageSelectLabelText?: (total: number) => string;
+    /**
+     * Provide a custom render function for the page-selection control.
+     * When provided, the default `<Select>` is replaced with the returned node.
+     */
+    renderPageSelect?: (props: {
+        /** The currently active page. */
+        currentPage: number;
+        /** Total number of pages derived from `totalItems` and `pageSize`. */
+        totalPages: number;
+        /** Current page size. */
+        currentPageSize: number;
+        /** The computed accessible label for the page-selection control. */
+        pageSelectLabelText: string;
+        /** Sets the active page. */
+        onSetPage: (page: number | string) => void;
+    }) => React.ReactNode;
     /**
      * The number dictating how many items a page contains.
      */
@@ -98,7 +114,8 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     pageText?: (page: number, pagesUnknown?: boolean) => string;
     /**
-     * `true` if the total number of items is unknown.
+     * `true` when the total number of pages is unknown. Hides the page selection
+     * control.
      */
     pagesUnknown?: boolean;
     /**