@carbon/react 1.112.0 → 1.113.0

package/lib/components/Notification/Notification.js

@@ -6,24 +6,24 @@
  */
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_noopFn = require("../../internal/noopFn.js");
+const require_warning = require("../../internal/warning.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
 const require_useId = require("../../internal/useId.js");
-const require_noopFn = require("../../internal/noopFn.js");
-const require_warning = require("../../internal/warning.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_useNoInteractiveChildren = require("../../internal/useNoInteractiveChildren.js");
 const require_index$1 = require("../Button/index.js");
 const require_wrapFocus = require("../../internal/wrapFocus.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/NumberInput/NumberInput.Skeleton.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/NumberInput/NumberInput.js

@@ -19,10 +19,10 @@ const require_FormContext = require("../FluidForm/FormContext.js");
 const require_useControllableState = require("../../internal/useControllableState.js");
 const require_clamp = require("../../internal/clamp.js");
 const require_NumberFormatPropTypes = require("./NumberFormatPropTypes.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -154,13 +154,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.default.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;
@@ -414,7 +423,8 @@ const NumberInput = react.default.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,
@@ -733,4 +743,5 @@ function disableWheel(e) {
 }
 //#endregion
 exports.NumberInput = NumberInput;
+exports.parseNumberWithLocale = parseNumberWithLocale;
 exports.validateNumberSeparators = validateNumberSeparators;

package/lib/components/OrderedList/OrderedList.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -6,11 +6,11 @@
  */
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_noopFn = require("../../internal/noopFn.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_setupGetInstanceId = require("../../tools/setupGetInstanceId.js");
-const require_noopFn = require("../../internal/noopFn.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
 const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
@@ -18,10 +18,10 @@ const require_index = require("../IconButton/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
 const require_FloatingMenu = require("../../internal/FloatingMenu.js");
 const require_useOutsideClick = require("../../internal/useOutsideClick.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -459,4 +459,6 @@ OverflowMenu.propTypes = {
 	])
 };
 //#endregion
+exports.OverflowMenu = OverflowMenu;
 exports.default = OverflowMenu;
+exports.getMenuOffset = getMenuOffset;

package/lib/components/OverflowMenu/index.js

@@ -23,12 +23,13 @@ const OverflowMenu = (0, react.forwardRef)((props, ref) => {
 	return require_index.useFeatureFlag("enable-v12-overflowmenu") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.OverflowMenu, {
 		...props,
 		ref
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverflowMenu.default, {
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverflowMenu.OverflowMenu, {
 		...props,
 		ref
 	});
 });
 OverflowMenu.displayName = "OverflowMenu";
-OverflowMenu.propTypes = require_OverflowMenu.default.propTypes;
+OverflowMenu.propTypes = require_OverflowMenu.OverflowMenu.propTypes;
 //#endregion
+exports.OverflowMenu = OverflowMenu;
 exports.default = OverflowMenu;

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

@@ -15,10 +15,10 @@ const require_index$1 = require("../../IconButton/index.js");
 const require_mergeRefs = require("../../../tools/mergeRefs.js");
 const require_Menu = require("../../Menu/Menu.js");
 const require_useAttachedMenu = require("../../../internal/useAttachedMenu.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -6,16 +6,16 @@
  */
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_warning = require("../../internal/warning.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_useId = require("../../internal/useId.js");
-const require_warning = require("../../internal/warning.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/OverflowMenuItem/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const require_OverflowMenuItem = require("./OverflowMenuItem.js");
 //#region src/components/OverflowMenuItem/index.ts
 /**
 * Copyright IBM Corp. 2016, 2023
@@ -12,6 +13,7 @@
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-var OverflowMenuItem_default = require("./OverflowMenuItem.js").default;
+var OverflowMenuItem_default = require_OverflowMenuItem.default;
 //#endregion
+exports.OverflowMenuItem = require_OverflowMenuItem.default;
 exports.default = OverflowMenuItem_default;

package/lib/components/OverflowMenuV2/index.js

@@ -27,7 +27,7 @@ function OverflowMenuV2(props) {
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FeatureFlags, {
 		enableV12Overflowmenu: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { ...props })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.OverflowMenu, { ...props })
 	});
 }
 //#endregion

package/lib/components/PageHeader/PageHeader.js

@@ -22,10 +22,10 @@ const require_useMatchMedia = require("../../internal/useMatchMedia.js");
 const require_Tag = require("../Tag/Tag.js");
 const require_OperationalTag = require("../Tag/OperationalTag.js");
 const require_useOverflowItems = require("../../internal/useOverflowItems.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -71,7 +71,7 @@ const PageHeaderBreadcrumbBar = react.default.forwardRef(({ border = true, class
 		className: classNames,
 		ref,
 		...other,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.GridAsGridComponent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.default, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.Grid, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.default, {
 			lg: 16,
 			md: 8,
 			sm: 4,
@@ -112,7 +112,7 @@ const PageHeaderContent = react.default.forwardRef(({ className, children, title
 		className: classNames,
 		ref,
 		...other,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.GridAsGridComponent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Column.default, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.Grid, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Column.default, {
 			lg: 16,
 			md: 8,
 			sm: 4,
@@ -362,7 +362,7 @@ const PageHeaderTabBar = react.default.forwardRef(({ className, children, tags =
 		className: classNames,
 		ref,
 		...other,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.GridAsGridComponent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.default, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Grid.Grid, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.default, {
 			lg: 16,
 			md: 8,
 			sm: 4,

package/lib/components/PageHeader/index.js

@@ -25,9 +25,23 @@ var PageHeader_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	TabBar: () => require_PageHeader.TabBar
 });
 //#endregion
+exports.BreadcrumbBar = require_PageHeader.BreadcrumbBar;
+exports.Content = require_PageHeader.Content;
+exports.ContentPageActions = require_PageHeader.ContentPageActions;
+exports.ContentText = require_PageHeader.ContentText;
+exports.HeroImage = require_PageHeader.HeroImage;
+exports.PageHeader = require_PageHeader.PageHeader;
+exports.PageHeaderBreadcrumbBar = require_PageHeader.PageHeaderBreadcrumbBar;
+exports.PageHeaderContent = require_PageHeader.PageHeaderContent;
+exports.PageHeaderContentPageActions = require_PageHeader.PageHeaderContentPageActions;
+exports.PageHeaderContentText = require_PageHeader.PageHeaderContentText;
+exports.PageHeaderHeroImage = require_PageHeader.PageHeaderHeroImage;
+exports.PageHeaderTabBar = require_PageHeader.PageHeaderTabBar;
 Object.defineProperty(exports, "PageHeader_exports", {
 	enumerable: true,
 	get: function() {
 		return PageHeader_exports;
 	}
 });
+exports.Root = require_PageHeader.Root;
+exports.TabBar = require_PageHeader.TabBar;

package/lib/components/Pagination/Pagination.Skeleton.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_index = require("../SkeletonText/index.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -46,4 +46,5 @@ PaginationSkeleton.propTypes = {
 */
 className: prop_types.default.string };
 //#endregion
+exports.PaginationSkeleton = PaginationSkeleton;
 exports.default = PaginationSkeleton;

package/lib/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/lib/components/Pagination/Pagination.js

@@ -9,13 +9,14 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
 const require_index = require("../IconButton/index.js");
+const require_clamp = require("../../internal/clamp.js");
 const require_usePreviousValue = require("../../internal/usePreviousValue.js");
 const require_index$1 = require("../Select/index.js");
 const require_index$2 = require("../SelectItem/index.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -57,7 +58,7 @@ const getPageSize = (pageSizes, pageSize) => {
 	}
 	return pageSizes[0].value;
 };
-const Pagination = react.default.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.default.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 = require_usePrefix.usePrefix();
 	const inputId = require_useId.useFallbackId(id?.toString());
 	const backBtnRef = (0, react.useRef)(null);
@@ -91,7 +92,7 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 		[`${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
@@ -145,7 +146,8 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 	]);
 	(0, react.useEffect)(() => {
 		if (controlledPageSize === prevControlledPageSize) return;
-		setPageSize(getPageSize(normalizedControlledPageSizes, controlledPageSize));
+		const nextPageSize = getPageSize(normalizedControlledPageSizes, controlledPageSize);
+		setPageSize(nextPageSize);
 	}, [
 		controlledPageSize,
 		normalizedControlledPageSizes,
@@ -170,6 +172,18 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 			});
 		}
 	}
+	function handleSetPage(nextPage) {
+		if (disabled || pageInputDisabled) return;
+		const numericPage = Number(nextPage);
+		if (!Number.isInteger(numericPage)) return;
+		const clamped = require_clamp.clamp(numericPage, 1, totalPages);
+		if (clamped === page) return;
+		setPage(clamped);
+		if (onChange) onChange({
+			page: clamped,
+			pageSize
+		});
+	}
 	function incrementPage() {
 		const nextPage = page + 1;
 		setPage(nextPage);
@@ -228,7 +242,13 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 			children: [pagesUnknown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`,
 				children: pageText(page)
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderPageSelect ? renderPageSelect({
+				currentPage: page,
+				totalPages,
+				currentPageSize: pageSize,
+				pageSelectLabelText: pageSelectLabelText(totalPages),
+				onSetPage: handleSetPage
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
 				id: `${prefix}-pagination-select-${inputId}-right`,
 				className: `${prefix}--select__page-number`,
 				labelText: pageSelectLabelText(totalPages),
@@ -346,6 +366,11 @@ Pagination.propTypes = {
 	*/
 	pageSelectLabelText: prop_types.default.func,
 	/**
+	* Provide a custom render function for the page-selection control.
+	* When provided, the default `<Select>` is replaced with the returned node.
+	*/
+	renderPageSelect: prop_types.default.func,
+	/**
 	* The number dictating how many items a page contains.
 	*/
 	pageSize: prop_types.default.number,

package/lib/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/lib/components/Pagination/experimental/PageSelector.js

@@ -10,10 +10,10 @@ const require_usePrefix = require("../../../internal/usePrefix.js");
 const require_useId = require("../../../internal/useId.js");
 const require_index = require("../../Select/index.js");
 const require_index$1 = require("../../SelectItem/index.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -24,9 +24,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * 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 = `${require_usePrefix.usePrefix()}--unstable-pagination__page-selector`;
 	const instanceId = `${namespace}__select-${require_useId.useId()}`;
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV !== "production") 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__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {