@carbon/react 1.114.0 → 1.115.0

package/lib/components/FileUploader/FileUploaderButton.js

@@ -8,10 +8,10 @@
 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_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_Button = require("../Button/Button.js");
 let react = require("react");
 react = require_runtime.__toESM(react);

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -8,10 +8,10 @@
 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_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_events = require("../../tools/events.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
@@ -57,13 +57,13 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 			return acc.concat([curr]);
 		}, []);
 	}
-	const handleFiles = (event, files) => {
-		if (!files.length) return onAddFiles(event, { addedFiles: [] });
-		return onAddFiles(event, { addedFiles: validateFiles(multiple ? files : [files[0]]) });
+	const getAddedFiles = (files) => {
+		if (!files.length) return [];
+		return validateFiles(multiple ? files : [files[0]]);
 	};
 	const handleChange = (event) => {
 		const files = [...event.target.files ?? []];
-		return handleFiles(event, files);
+		return onAddFiles(event, { addedFiles: getAddedFiles(files) });
 	};
 	const handleDrop = (event) => {
 		const items = [...event.dataTransfer.items ?? []];
@@ -74,7 +74,13 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 			if (file) acc.push(file);
 			return acc;
 		}, []) : [...event.dataTransfer.files];
-		return handleFiles(event, files);
+		const addedFiles = getAddedFiles(files);
+		if (inputRef.current) try {
+			const dataTransfer = new DataTransfer();
+			addedFiles.forEach((file) => dataTransfer.items.add(file));
+			inputRef.current.files = dataTransfer.files;
+		} catch {}
+		return onAddFiles(event, { addedFiles });
 	};
 	const handleClick = () => {
 		if (!disabled) inputRef.current?.click();

package/lib/components/FileUploader/FileUploaderItem.js

@@ -9,10 +9,10 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_noopFn = require("../../internal/noopFn.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_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_Tooltip = require("../Tooltip/Tooltip.js");
 const require_Filename = require("./Filename.js");
 let react = require("react");

package/lib/components/FormLabel/FormLabel.d.ts

@@ -16,7 +16,7 @@ export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabel
      */
     className?: string;
     /**
-     * Provide a unique id for the given <FormLabel>
+     * Provide a unique id for the given `FormLabel`
      */
     id?: string;
 }
@@ -32,7 +32,7 @@ declare namespace FormLabel {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Provide a unique id for the given <FormLabel>
+         * Provide a unique id for the given `FormLabel`
          */
         id: PropTypes.Requireable<string>;
     };

package/lib/components/FormLabel/FormLabel.js

@@ -42,7 +42,7 @@ FormLabel.propTypes = {
 	*/
 	className: prop_types.default.string,
 	/**
-	* Provide a unique id for the given <FormLabel>
+	* Provide a unique id for the given `FormLabel`
 	*/
 	id: prop_types.default.string
 };

package/lib/components/Loading/Loading.js

@@ -8,6 +8,8 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");
@@ -22,8 +24,78 @@ 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.
 */
+const isModalDialog = (element) => {
+	if (element.matches("[aria-modal=\"true\"]")) return true;
+	if (!(element instanceof HTMLDialogElement) || !element.open) return false;
+	try {
+		return element.matches(":modal");
+	} catch {
+		return true;
+	}
+};
+const isLayeredOnTop = (target, overlay) => {
+	if (!(target instanceof Element)) return false;
+	for (let element = target; element; element = element.parentElement) if (isModalDialog(element)) return !element.contains(overlay);
+	return false;
+};
+const focusWithBorrowedTabIndex = (element) => {
+	const hadTabIndex = element.hasAttribute("tabindex");
+	if (!hadTabIndex) element.setAttribute("tabindex", "-1");
+	element.focus();
+	if (hadTabIndex) return;
+	if (document.activeElement === element) element.addEventListener("blur", () => element.removeAttribute("tabindex"), { once: true });
+	else element.removeAttribute("tabindex");
+};
+const restoreFocus = (overlay, previouslyFocused) => {
+	const activeElement = document.activeElement;
+	if (!(!activeElement || activeElement === document.body || overlay.contains(activeElement)) || !previouslyFocused?.isConnected) return;
+	previouslyFocused.focus();
+	if (document.activeElement === previouslyFocused) return;
+	const fallback = previouslyFocused.parentElement;
+	if (!fallback || fallback === document.body || fallback === document.documentElement) return;
+	focusWithBorrowedTabIndex(fallback);
+};
+const useFocusTrap = (overlayRef, active) => {
+	(0, react.useEffect)(() => {
+		const overlay = overlayRef.current;
+		if (!active || !overlay) return;
+		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		if (!isLayeredOnTop(previouslyFocused, overlay)) overlay.focus();
+		let reclaiming = false;
+		const reclaimFocus = () => {
+			if (reclaiming) return;
+			reclaiming = true;
+			try {
+				overlay.focus();
+			} finally {
+				reclaiming = false;
+			}
+		};
+		const handleFocusIn = (event) => {
+			const { target } = event;
+			if (!(target instanceof Node) || overlay.contains(target)) return;
+			if (isLayeredOnTop(target, overlay)) return;
+			reclaimFocus();
+		};
+		const handleKeyDown = (event) => {
+			if (!require_match.match(event, require_keys.Tab)) return;
+			if (isLayeredOnTop(event.target, overlay)) return;
+			event.preventDefault();
+			reclaimFocus();
+		};
+		document.addEventListener("focusin", handleFocusIn, true);
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			document.removeEventListener("focusin", handleFocusIn, true);
+			document.removeEventListener("keydown", handleKeyDown, true);
+			restoreFocus(overlay, previouslyFocused);
+		};
+	}, [overlayRef, active]);
+};
 function Loading({ active = true, className: customClassName, withOverlay = true, small = false, description = "loading", ...rest }) {
 	const prefix = require_usePrefix.usePrefix();
+	const overlayRef = (0, react.useRef)(null);
+	useFocusTrap(overlayRef, withOverlay && active);
 	const loadingClassName = (0, classnames.default)(customClassName, {
 		[`${prefix}--loading`]: true,
 		[`${prefix}--loading--small`]: small,
@@ -62,7 +134,15 @@ function Loading({ active = true, className: customClassName, withOverlay = true
 	});
 	return withOverlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: overlayClassName,
-		children: loading
+		role: "presentation",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: overlayRef,
+			role: active ? "dialog" : void 0,
+			"aria-modal": active ? "true" : void 0,
+			"aria-label": active ? description : void 0,
+			tabIndex: active ? -1 : void 0,
+			children: loading
+		})
 	}) : loading;
 }
 Loading.propTypes = {

package/lib/components/Menu/Menu.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.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_deprecate = require("../../prop-types/deprecate.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_MenuContext = require("./MenuContext.js");
 const require_useLayoutDirection = require("../LayoutDirection/useLayoutDirection.js");
 const require_environment = require("../../internal/environment.js");

package/lib/components/Menu/MenuItem.js

@@ -8,11 +8,11 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.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_defaultItemToString = require("../../internal/defaultItemToString.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_MenuContext = require("./MenuContext.js");
 const require_useLayoutDirection = require("../LayoutDirection/useLayoutDirection.js");
 const require_Menu = require("./Menu.js");

package/lib/components/Modal/Modal.js

@@ -10,13 +10,13 @@ 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_navigation = require("../../internal/keyboard/navigation.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
+const require_navigation = require("../../internal/keyboard/navigation.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_index$1 = require("../IconButton/index.js");
 const require_index$2 = require("../Button/index.js");

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -7,14 +7,14 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.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_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
 const require_isItemDisabled = require("../../internal/isItemDisabled.js");
 const require_utils = require("../../internal/utils.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_index = require("../AILabel/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
 const require_hasHelperText = require("../../internal/hasHelperText.js");

package/lib/components/MultiSelect/MultiSelect.js

@@ -8,14 +8,14 @@
 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_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
 const require_isItemDisabled = require("../../internal/isItemDisabled.js");
 const require_utils = require("../../internal/utils.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_index$1 = require("../AILabel/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");

package/lib/components/Notification/Notification.js

@@ -10,12 +10,12 @@ 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_deprecate = require("../../prop-types/deprecate.js");
 const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_useNoInteractiveChildren = require("../../internal/useNoInteractiveChildren.js");
 const require_index$1 = require("../Button/index.js");

package/lib/components/NumberInput/NumberInput.js

@@ -8,11 +8,11 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.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_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_index = require("../AILabel/index.js");
 const require_useControllableState = require("../../internal/useControllableState.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -8,11 +8,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_deprecate = require("../../prop-types/deprecate.js");
 const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
 const require_index = require("../IconButton/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -9,9 +9,9 @@ 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_useId = require("../../internal/useId.js");
 const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
-const require_useId = require("../../internal/useId.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");

package/lib/components/Pagination/Pagination.d.ts

@@ -108,7 +108,7 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /**
      * The choices for `pageSize`.
      */
-    pageSizes: number[] | PaginationPageSize[];
+    pageSizes?: Array<number | PaginationPageSize>;
     /**
      * The translatable text showing the current page.
      */

package/lib/components/Pagination/Pagination.js

@@ -30,14 +30,11 @@ react_fast_compare = require_runtime.__toESM(react_fast_compare);
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const isPaginationPageSizeArray = (sizes) => typeof sizes[0] === "object" && sizes[0] !== null;
-const mapPageSizesToObject = (sizes) => {
-	if (isPaginationPageSizeArray(sizes)) return sizes;
-	return sizes.map((size) => ({
-		text: String(size),
-		value: size
-	}));
-};
+const mapPageSizesToObject = (sizes) => sizes && sizes.length ? sizes.map((size) => typeof size === "object" ? size : {
+	text: String(size),
+	value: size
+}) : void 0;
+const DEFAULT_PAGE_SIZE = 10;
 function renderSelectItems(total) {
 	let counter = 1;
 	const itemArr = [];
@@ -51,12 +48,11 @@ function renderSelectItems(total) {
 	return itemArr;
 }
 const getPageSize = (pageSizes, pageSize) => {
-	if (typeof pageSize !== "undefined") {
-		if (pageSizes.find((size) => {
-			return pageSize === size.value;
-		})) return pageSize;
+	if (!pageSizes) {
+		const resolved = pageSize ?? DEFAULT_PAGE_SIZE;
+		return resolved > 0 ? resolved : DEFAULT_PAGE_SIZE;
 	}
-	return pageSizes[0].value;
+	return typeof pageSize !== "undefined" && pageSizes.some((size) => pageSize === size.value) ? pageSize : 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, renderPageSelect, pageSize: controlledPageSize, pageSizeInputDisabled, pageSizes: controlledPageSizes, pageText = (page) => `page ${page}`, pagesUnknown = false, size = "md", totalItems, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
@@ -93,6 +89,13 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 		[`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
 	});
 	const selectItems = renderPageSelect ? [] : renderSelectItems(totalPages);
+	const pageSelectNode = pagesUnknown ? null : renderPageSelect?.({
+		currentPage: page,
+		totalPages,
+		currentPageSize: pageSize,
+		pageSelectLabelText: pageSelectLabelText(totalPages),
+		onSetPage: handleSetPage
+	}) ?? null;
 	const focusMap = {
 		backward: backBtnRef,
 		forward: forwardBtnRef
@@ -121,7 +124,13 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 		setPage(controlledPage);
 	}, [controlledPage]);
 	(0, react.useEffect)(() => {
-		if (typeof prevControlledPageSizes === "undefined" || (0, react_fast_compare.default)(prevControlledPageSizes, normalizedControlledPageSizes)) return;
+		if ((0, react_fast_compare.default)(prevControlledPageSizes, normalizedControlledPageSizes)) return;
+		if (!normalizedControlledPageSizes) {
+			const nextPageSize = getPageSize(void 0, controlledPageSize);
+			setPageSizes(void 0);
+			setPageSize(nextPageSize);
+			return;
+		}
 		setPageSizes((prev) => (0, react_fast_compare.default)(normalizedControlledPageSizes, prev) ? prev : normalizedControlledPageSizes);
 		const nextPageSize = getPageSize(normalizedControlledPageSizes, controlledPageSize ?? pageSize);
 		const hasPageSize = normalizedControlledPageSizes.some((size) => {
@@ -209,46 +218,36 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: `${prefix}--pagination__left`,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					id: `${prefix}-pagination-select-${inputId}-count-label`,
-					className: `${prefix}--pagination__text`,
-					htmlFor: `${prefix}-pagination-select-${inputId}`,
-					children: itemsPerPageText
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
-					id: `${prefix}-pagination-select-${inputId}`,
-					className: `${prefix}--select__item-count`,
-					labelText: "",
-					hideLabel: true,
-					noLabel: true,
-					inline: true,
-					onChange: handleSizeChange,
-					disabled: pageSizeInputDisabled || disabled,
-					value: pageSize,
-					children: pageSizes.map((sizeObj) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
-						value: sizeObj.value,
-						text: String(sizeObj.text)
-					}, sizeObj.value))
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: `${prefix}--pagination__text ${prefix}--pagination__items-count`,
-					children: pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)
-				})
-			]
+			className: (0, classnames.default)(`${prefix}--pagination__left`, { [`${prefix}--pagination__left--no-sizer`]: !pageSizes }),
+			children: [pageSizes && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				id: `${prefix}-pagination-select-${inputId}-count-label`,
+				className: `${prefix}--pagination__text`,
+				htmlFor: `${prefix}-pagination-select-${inputId}`,
+				children: itemsPerPageText
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+				id: `${prefix}-pagination-select-${inputId}`,
+				className: `${prefix}--select__item-count`,
+				labelText: "",
+				hideLabel: true,
+				noLabel: true,
+				inline: true,
+				onChange: handleSizeChange,
+				disabled: pageSizeInputDisabled || disabled,
+				value: pageSize,
+				children: pageSizes.map((sizeObj) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+					value: sizeObj.value,
+					text: String(sizeObj.text)
+				}, sizeObj.value))
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefix}--pagination__text ${prefix}--pagination__items-count`,
+				children: pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)
+			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: `${prefix}--pagination__right`,
+			className: (0, classnames.default)(`${prefix}--pagination__right`, { [`${prefix}--pagination__right--no-content`]: !pagesUnknown && !!renderPageSelect }),
 			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: [renderPageSelect ? renderPageSelect({
-				currentPage: page,
-				totalPages,
-				currentPageSize: pageSize,
-				pageSelectLabelText: pageSelectLabelText(totalPages),
-				onSetPage: handleSetPage
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderPageSelect ? pageSelectNode : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
 				id: `${prefix}-pagination-select-${inputId}-right`,
 				className: `${prefix}--select__page-number`,
 				labelText: pageSelectLabelText(totalPages),
@@ -260,7 +259,7 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", b
 				children: selectItems
 			}, page), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: `${prefix}--pagination__text`,
-				children: pageRangeText(page, totalPages)
+				children: pageSelectNode == null && renderPageSelect ? `${page} ${pageRangeText(page, totalPages)}` : pageRangeText(page, totalPages)
 			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: `${prefix}--pagination__control-buttons`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
@@ -381,10 +380,10 @@ Pagination.propTypes = {
 	/**
 	* The choices for `pageSize`.
 	*/
-	pageSizes: prop_types.default.oneOfType([prop_types.default.arrayOf(prop_types.default.number.isRequired), prop_types.default.arrayOf(prop_types.default.shape({
+	pageSizes: prop_types.default.arrayOf(prop_types.default.oneOfType([prop_types.default.number, prop_types.default.shape({
 		text: prop_types.default.string.isRequired,
 		value: prop_types.default.number.isRequired
-	}).isRequired)]).isRequired,
+	})])),
 	/**
 	* The translatable text showing the current page.
 	*/

package/lib/components/Popover/index.js

@@ -7,12 +7,12 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-const require_navigation = require("../../internal/keyboard/navigation.js");
 const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
 const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
 const require_utils = require("../../internal/utils.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
 const require_useEvent = require("../../internal/useEvent.js");
+const require_navigation = require("../../internal/keyboard/navigation.js");
 const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
 const require_index = require("../FeatureFlags/index.js");
 let react = require("react");

package/lib/components/RadioTile/RadioTile.js

@@ -9,11 +9,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_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_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_index = require("../FeatureFlags/index.js");
 const require_index$1 = require("../AILabel/index.js");
 let react = require("react");

package/lib/components/Search/Search.js

@@ -8,11 +8,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_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_Tooltip = require("../Tooltip/Tooltip.js");
 const require_events = require("../../tools/events.js");
 const require_FormContext = require("../FluidForm/FormContext.js");

package/lib/components/Slider/Slider.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.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_deprecate = require("../../prop-types/deprecate.js");
+const require_keys = require("../../internal/keyboard/keys.js");
+const require_match = require("../../internal/keyboard/match.js");
 const require_Tooltip = require("../Tooltip/Tooltip.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_clamp = require("../../internal/clamp.js");