@carbon/react 1.112.0 → 1.113.0-rc.0

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;
     /**

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,