@carbon/react 1.104.1 → 1.105.0

package/lib/components/DatePicker/DatePicker.js

@@ -11,7 +11,6 @@ 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_FormContext = require('../FluidForm/FormContext.js');
 const require_index = require('../DatePickerInput/index.js');
 const require_appendToPlugin = require('./plugins/appendToPlugin.js');
 const require_fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
@@ -26,7 +25,6 @@ react = require_runtime.__toESM(react);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _carbon_icons_react = require("@carbon/icons-react");
 let flatpickr = require("flatpickr");
 flatpickr = require_runtime.__toESM(flatpickr);
 let flatpickr_dist_l10n_index = require("flatpickr/dist/l10n/index");
@@ -135,9 +133,8 @@ function updateClassNames(calendar, prefix) {
 	}
 }
 const DatePicker = (0, react.forwardRef)((props, ref) => {
-	const { allowInput, appendTo, children, className, closeOnSelect = true, dateFormat = "m/d/Y", datePickerType, disable, enable, inline, invalid, invalidText, warn, warnText, light = false, locale = "en", maxDate, minDate, onChange, onClose, onOpen, readOnly = false, short = false, value, parseDate: parseDateProp, nextMonthAriaLabel = "Next month", prevMonthAriaLabel = "Previous month", ...rest } = props;
+	const { allowInput, appendTo, children, className, closeOnSelect = true, dateFormat = "m/d/Y", datePickerType, disable, enable, inline, invalid, warn, light = false, locale = "en", maxDate, minDate, onChange, onClose, onOpen, readOnly = false, short = false, value, parseDate: parseDateProp, nextMonthAriaLabel = "Next month", prevMonthAriaLabel = "Previous month", ...rest } = props;
 	const prefix = require_usePrefix.usePrefix();
-	const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
 	const [hasInput, setHasInput] = (0, react.useState)(false);
 	const startInputField = (0, react.useCallback)((node) => {
 		if (node !== null) {
@@ -441,24 +438,6 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 		startInputField
 	]);
 	let fluidError;
-	if (isFluid) {
-		if (invalid) fluidError = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid` }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: `${prefix}--date-picker__divider` }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `${prefix}--form-requirement`,
-				children: invalidText
-			})
-		] });
-		else if (warn) fluidError = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn` }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: `${prefix}--date-picker__divider` }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `${prefix}--form-requirement`,
-				children: warnText
-			})
-		] });
-	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: wrapperClasses,
 		ref,
@@ -486,7 +465,6 @@ DatePicker.propTypes = {
 	enable: prop_types.default.array,
 	inline: prop_types.default.bool,
 	invalid: prop_types.default.bool,
-	invalidText: prop_types.default.node,
 	light: require_deprecate.deprecate(prop_types.default.bool, "The `light` prop for `DatePicker` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
 	locale: prop_types.default.oneOfType([prop_types.default.object, prop_types.default.oneOf(require_DatePickerLocales.SUPPORTED_LOCALES)]),
 	maxDate: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
@@ -508,7 +486,6 @@ DatePicker.propTypes = {
 		prop_types.default.number
 	]),
 	warn: prop_types.default.bool,
-	warnText: prop_types.default.node,
 	nextMonthAriaLabel: prop_types.default.string,
 	prevMonthAriaLabel: prop_types.default.string
 };

package/lib/components/DatePicker/plugins/fixEventsPlugin.d.ts

@@ -1,2 +1,18 @@
-declare function _default(config: object): Plugin;
-export default _default;
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { Plugin } from 'flatpickr/dist/types/options';
+interface FixEventsPluginConfig {
+    inputFrom: HTMLInputElement;
+    inputTo?: HTMLInputElement | null;
+    lastStartValue: {
+        current: string;
+    };
+    container?: HTMLElement | null;
+}
+type FixEventsPlugin = (config: FixEventsPluginConfig) => Plugin;
+declare const fixEventsPlugin: FixEventsPlugin;
+export default fixEventsPlugin;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -8,24 +8,16 @@
 const require_keys = require('../../../internal/keyboard/keys.js');
 const require_match = require('../../../internal/keyboard/match.js');
 
-//#region src/components/DatePicker/plugins/fixEventsPlugin.js
-/**
-* Copyright IBM Corp. 2016, 2026
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-/**
-* @param {object} config Plugin configuration.
-* @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
-*/
-var fixEventsPlugin_default = (config) => (fp) => {
+//#region src/components/DatePicker/plugins/fixEventsPlugin.ts
+const fixEventsPlugin = (config) => (fp) => {
 	const { inputFrom, inputTo, lastStartValue, container } = config;
 	let mouseDownInside = false;
 	const getEventPath = (event) => typeof event.composedPath === "function" ? event.composedPath() : [];
 	const isEventInside = (event) => {
 		const path = getEventPath(event);
-		return Boolean(container && (path.includes(container) || container.contains(event.target)) || fp.calendarContainer && (path.includes(fp.calendarContainer) || fp.calendarContainer.contains(event.target)) || inputFrom && (path.includes(inputFrom) || inputFrom.contains(event.target)) || inputTo && (path.includes(inputTo) || inputTo.contains(event.target)));
+		const { target } = event;
+		if (!(target instanceof Node)) return false;
+		return Boolean(container && (path.includes(container) || container.contains(target)) || fp.calendarContainer && (path.includes(fp.calendarContainer) || fp.calendarContainer.contains(target)) || inputFrom && (path.includes(inputFrom) || inputFrom.contains(target)) || inputTo && (path.includes(inputTo) || inputTo.contains(target)));
 	};
 	/**
 	* Handles `click` outside to close calendar
@@ -55,8 +47,12 @@ var fixEventsPlugin_default = (config) => (fp) => {
 		const { target } = event;
 		if (inputFrom === target || inputTo === target) {
 			if (require_match.match(event, require_keys.Enter)) {
-				fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+				mouseDownInside = false;
+				fp.setDate(inputTo ? [inputFrom.value, inputTo.value] : [inputFrom.value], true, fp.config.dateFormat);
 				event.stopPropagation();
+				if (inputTo === target && fp.config.closeOnSelect) requestAnimationFrame(() => {
+					fp.close();
+				});
 			} else if (require_match.match(event, require_keys.ArrowLeft) || require_match.match(event, require_keys.ArrowRight)) event.stopPropagation();
 			else if (require_match.match(event, require_keys.ArrowDown)) {
 				event.preventDefault();
@@ -77,11 +73,12 @@ var fixEventsPlugin_default = (config) => (fp) => {
 	*/
 	const handleBlur = (event) => {
 		const { target } = event;
+		if (!inputTo) return;
 		if (inputTo === target && fp.selectedDates[1]) {
 			const withoutTime = (date) => date?.setHours(0, 0, 0, 0);
 			const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
 			const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
-			if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+			if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
 		}
 		const isValidDate = (date) => date?.toString() !== "Invalid Date";
 		if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
@@ -134,4 +131,4 @@ var fixEventsPlugin_default = (config) => (fp) => {
 };
 
 //#endregion
-exports.default = fixEventsPlugin_default;
+exports.default = fixEventsPlugin;

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -11,8 +11,8 @@ const require_Text = require('../Text/Text.js');
 const require_useId = require('../../internal/useId.js');
 const require_warning = require('../../internal/warning.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
-const require_index = require('../AILabel/index.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../AILabel/index.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
 const require_useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 let classnames = require("classnames");
@@ -114,7 +114,6 @@ const DatePickerInput = (0, react.forwardRef)((props, ref) => {
 						className: `${prefix}--date-picker-input-inner-wrapper--decorator`,
 						children: normalizedDecorator
 					}) : "",
-					isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerIcon, { datePickerType }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerIcon, {
 						datePickerType,
 						invalid: normalizedProps.invalid,

package/lib/components/Dropdown/Dropdown.js

@@ -8,10 +8,10 @@
 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_index = require('../FeatureFlags/index.js');
-const require_index$1 = require('../AILabel/index.js');
 const require_defaultItemToString = require('../../internal/defaultItemToString.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../FeatureFlags/index.js');
+const require_index$1 = require('../AILabel/index.js');
 const require_ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
 const require_index$2 = require('../ListBox/index.js');

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -24,7 +24,7 @@ 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 FluidDatePicker = react.default.forwardRef(function FluidDatePicker({ className, children, invalid, invalidText, readOnly, warn, warnText, ...other }, ref) {
+const FluidDatePicker = react.default.forwardRef(function FluidDatePicker({ className, children, invalid, readOnly, warn, ...other }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const classNames = (0, classnames.default)(className, {
 		[`${prefix}--date-picker--fluid`]: true,
@@ -36,10 +36,8 @@ const FluidDatePicker = react.default.forwardRef(function FluidDatePicker({ clas
 		value: { isFluid: true },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 			invalid,
-			invalidText,
 			readOnly,
 			warn,
-			warnText,
 			className: classNames,
 			ref,
 			...other,

package/lib/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ComponentProps } from 'react';
 import { MultiSelect, type MultiSelectProps } from '../MultiSelect';
-import { UseSelectProps } from 'downshift';
+import { UseComboboxProps, UseSelectProps } from 'downshift';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
@@ -97,7 +97,7 @@ export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemTy
      * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
      * the currently typed input.
      */
-    onInputValueChange?: (inputValue: string) => void;
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
     /**
      * `onMenuChange` is a utility for this controlled component to communicate to a
      * consuming component that the menu was open(`true`)/closed(`false`).

package/lib/components/Menu/Menu.js

@@ -54,7 +54,7 @@ const Menu = (0, react.forwardRef)(function Menu({ backgroundToken = "layer", bo
 	const menu = (0, react.useRef)(null);
 	const ref = require_useMergedRefs.useMergedRefs([forwardRef, menu]);
 	const [position, setPosition] = (0, react.useState)([-1, -1]);
-	const focusableItems = childContext.state.items.filter((item) => !item.disabled && item.ref.current);
+	const focusableItems = (0, react.useMemo)(() => childContext.state.items.filter((item) => !item.disabled && item.ref.current), [childContext.state.items]);
 	let actionButtonWidth;
 	if (containerRef?.current) {
 		const { width: w } = containerRef.current.getBoundingClientRect();
@@ -173,11 +173,18 @@ const Menu = (0, react.forwardRef)(function Menu({ backgroundToken = "layer", bo
 	(0, react.useEffect)(() => {
 		if (open) {
 			const raf = requestAnimationFrame(() => {
-				if (focusableItems.length > 0) focusItem();
+				const activeElement = menu.current?.ownerDocument.activeElement;
+				const menuContainsFocus = activeElement instanceof Node && menu.current?.contains(activeElement);
+				if (focusableItems.length > 0 && (!isRoot || menuContainsFocus)) focusItem();
 			});
 			return () => cancelAnimationFrame(raf);
 		}
-	}, [open, focusableItems]);
+	}, [
+		open,
+		focusableItems,
+		isRoot,
+		position
+	]);
 	(0, react.useEffect)(() => {
 		if (open) handleOpen();
 		else setPosition([-1, -1]);

package/lib/components/Menu/MenuItem.js

@@ -11,8 +11,8 @@ 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_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_defaultItemToString = require('../../internal/defaultItemToString.js');
+const require_useMergedRefs = require('../../internal/useMergedRefs.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

@@ -14,13 +14,13 @@ 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_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_index = require('../FeatureFlags/index.js');
 const require_index$1 = require('../IconButton/index.js');
 const require_index$2 = require('../Button/index.js');
 const require_index$3 = require('../ButtonSet/index.js');
 const require_index$4 = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_useResizeObserver = require('../../internal/useResizeObserver.js');
 const require_events = require('../../tools/events.js');
 const require_index$5 = require('../Layer/index.js');

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -12,9 +12,9 @@ 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_index = require('../AILabel/index.js');
 const require_defaultItemToString = require('../../internal/defaultItemToString.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../AILabel/index.js');
 const require_index$1 = require('../Checkbox/index.js');
 const require_ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
@@ -296,7 +296,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 					highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
 				};
 			case InputChange:
-				if (onInputValueChange) onInputValueChange(changes.inputValue);
+				if (onInputValueChange) onInputValueChange(changes);
 				setInputValue(changes.inputValue ?? "");
 				setIsOpen(true);
 				return {

package/lib/components/MultiSelect/MultiSelect.js

@@ -13,10 +13,10 @@ const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.
 const require_useId = require('../../internal/useId.js');
 const require_noopFn = require('../../internal/noopFn.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
-const require_index = require('../FeatureFlags/index.js');
-const require_index$1 = require('../AILabel/index.js');
 const require_defaultItemToString = require('../../internal/defaultItemToString.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../FeatureFlags/index.js');
+const require_index$1 = require('../AILabel/index.js');
 const require_index$2 = require('../Checkbox/index.js');
 const require_ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 const require_FormContext = require('../FluidForm/FormContext.js');

package/lib/components/NumberInput/NumberInput.js

@@ -11,9 +11,9 @@ 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_index = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
 const require_useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 const require_useControllableState = require('../../internal/useControllableState.js');
@@ -377,7 +377,7 @@ const NumberInput = react.default.forwardRef((props, forwardRef) => {
 							onChange: handleOnChange,
 							onKeyUp,
 							onKeyDown: (e) => {
-								if (type === "text") {
+								if (type === "text" && !readOnly && !disabled) {
 									if (require_match.match(e, require_keys.ArrowUp)) handleStep(e, "up");
 									else if (require_match.match(e, require_keys.ArrowDown)) handleStep(e, "down");
 								}

package/lib/components/Pagination/Pagination.js

@@ -9,6 +9,7 @@ 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_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");
@@ -29,12 +30,14 @@ 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.
 */
-function mapPageSizesToObject(sizes) {
-	return typeof sizes[0] === "object" && sizes[0] !== null ? sizes : sizes.map((size) => ({
-		text: size,
+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
 	}));
-}
+};
 function renderSelectItems(total) {
 	let counter = 1;
 	const itemArr = [];
@@ -47,30 +50,29 @@ function renderSelectItems(total) {
 	}
 	return itemArr;
 }
-function getPageSize(pageSizes, pageSize) {
-	if (pageSize) {
+const getPageSize = (pageSizes, pageSize) => {
+	if (typeof pageSize !== "undefined") {
 		if (pageSizes.find((size) => {
 			return pageSize === size.value;
 		})) return pageSize;
 	}
 	return pageSizes[0].value;
-}
+};
 const Pagination = react.default.forwardRef(({ backwardText = "Previous page", className: customClassName = "", disabled = false, forwardText = "Next page", 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 prefix = require_usePrefix.usePrefix();
 	const inputId = require_useId.useFallbackId(id?.toString());
 	const backBtnRef = (0, react.useRef)(null);
 	const forwardBtnRef = (0, react.useRef)(null);
-	const [pageSizes, setPageSizes] = (0, react.useState)(() => {
-		return mapPageSizesToObject(controlledPageSizes);
-	});
-	const [prevPageSizes, setPrevPageSizes] = (0, react.useState)(controlledPageSizes);
+	const pendingChangeRef = (0, react.useRef)(null);
+	const normalizedControlledPageSizes = (0, react.useMemo)(() => mapPageSizesToObject(controlledPageSizes), [controlledPageSizes]);
+	const prevControlledPageSize = require_usePreviousValue.usePreviousValue(controlledPageSize);
+	const prevControlledPageSizes = require_usePreviousValue.usePreviousValue(normalizedControlledPageSizes);
+	const [pageSizes, setPageSizes] = (0, react.useState)(normalizedControlledPageSizes);
 	const [page, setPage] = (0, react.useState)(controlledPage);
-	const [prevControlledPage, setPrevControlledPage] = (0, react.useState)(controlledPage);
 	const [focusTarget, setFocusTarget] = (0, react.useState)(null);
 	const [pageSize, setPageSize] = (0, react.useState)(() => {
-		return getPageSize(pageSizes, controlledPageSize);
+		return getPageSize(normalizedControlledPageSizes, controlledPageSize);
 	});
-	const [prevControlledPageSize, setPrevControlledPageSize] = (0, react.useState)(controlledPageSize);
 	const className = (0, classnames.default)({
 		[`${prefix}--pagination`]: true,
 		[`${prefix}--pagination--${size}`]: size,
@@ -104,22 +106,51 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", c
 			setFocusTarget(null);
 		}
 	}, [focusTarget]);
-	if (controlledPage !== prevControlledPage) {
+	(0, react.useEffect)(() => {
+		if (pendingChangeRef.current && onChange) {
+			onChange(pendingChangeRef.current);
+			pendingChangeRef.current = null;
+		}
+	}, [
+		onChange,
+		page,
+		pageSize
+	]);
+	(0, react.useEffect)(() => {
 		setPage(controlledPage);
-		setPrevControlledPage(controlledPage);
-	}
-	if (controlledPageSize !== prevControlledPageSize) {
-		setPageSize(getPageSize(pageSizes, controlledPageSize));
-		setPrevControlledPageSize(controlledPageSize);
-	}
-	if (!(0, react_fast_compare.default)(controlledPageSizes, prevPageSizes)) {
-		const pageSizes = mapPageSizesToObject(controlledPageSizes);
-		if (!pageSizes.find((size) => {
+	}, [controlledPage]);
+	(0, react.useEffect)(() => {
+		if (typeof prevControlledPageSizes === "undefined" || (0, react_fast_compare.default)(prevControlledPageSizes, normalizedControlledPageSizes)) return;
+		setPageSizes((prev) => (0, react_fast_compare.default)(normalizedControlledPageSizes, prev) ? prev : normalizedControlledPageSizes);
+		const nextPageSize = getPageSize(normalizedControlledPageSizes, controlledPageSize ?? pageSize);
+		const hasPageSize = normalizedControlledPageSizes.some((size) => {
 			return size.value === pageSize;
-		})) setPage(1);
-		setPageSizes(pageSizes);
-		setPrevPageSizes(controlledPageSizes);
-	}
+		});
+		const nextPage = hasPageSize ? page : 1;
+		const hasControlledPageSize = typeof controlledPageSize !== "undefined";
+		const hasValidControlledPageSize = hasControlledPageSize ? normalizedControlledPageSizes.some((size) => size.value === controlledPageSize) : false;
+		if (!hasPageSize) setPage(nextPage);
+		if (nextPageSize !== pageSize) setPageSize(nextPageSize);
+		if (onChange && (!hasControlledPageSize || !hasValidControlledPageSize) && (nextPage !== page || nextPageSize !== pageSize)) pendingChangeRef.current = {
+			page: nextPage,
+			pageSize: nextPageSize
+		};
+	}, [
+		controlledPageSize,
+		normalizedControlledPageSizes,
+		onChange,
+		page,
+		pageSize,
+		prevControlledPageSizes
+	]);
+	(0, react.useEffect)(() => {
+		if (controlledPageSize === prevControlledPageSize) return;
+		setPageSize(getPageSize(normalizedControlledPageSizes, controlledPageSize));
+	}, [
+		controlledPageSize,
+		normalizedControlledPageSizes,
+		prevControlledPageSize
+	]);
 	function handleSizeChange(event) {
 		const changes = {
 			pageSize: Number(event.target.value),

package/lib/components/Popover/index.js

@@ -9,6 +9,7 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.js');
 const require_usePrefix = require('../../internal/usePrefix.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_mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
@@ -206,7 +207,9 @@ const Popover = react.default.forwardRef(function PopoverRenderFunction({ isTabT
 	}, customClassName);
 	const mappedChildren = react.default.Children.map(children, (child) => {
 		const item = child;
-		const displayName = item?.type?.displayName;
+		const isToggletipButton = item?.type?.displayName === "ToggletipButton";
+		const isToggletipContent = item?.type?.displayName === "ToggletipContent";
+		const isPopoverContent = require_utils.isComponentElement(item, PopoverContent);
 		/**
 		* Only trigger elements (button) or trigger components (ToggletipButton) should be
 		* cloned because these will be decorated with a trigger-specific className and ref.
@@ -215,8 +218,8 @@ const Popover = react.default.forwardRef(function PopoverRenderFunction({ isTabT
 		* is on, even if they are a trigger element.
 		*/
 		const isTriggerElement = item?.type === "button";
-		const isTriggerComponent = enableFloatingStyles && displayName && ["ToggletipButton"].includes(displayName);
-		const isAllowedTriggerComponent = enableFloatingStyles && !["ToggletipContent", "PopoverContent"].includes(displayName);
+		const isTriggerComponent = enableFloatingStyles && isToggletipButton;
+		const isAllowedTriggerComponent = enableFloatingStyles && !isToggletipContent && !isPopoverContent;
 		if (react.default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
 			const className = (item?.props)?.className;
 			const ref = (item?.props).ref;
@@ -224,7 +227,7 @@ const Popover = react.default.forwardRef(function PopoverRenderFunction({ isTabT
 			return react.default.cloneElement(item, {
 				className: isTabTip && item?.type === "button" ? tabTipClasses : className || "",
 				ref: (node) => {
-					if (enableFloatingStyles && item?.type !== PopoverContent || enableFloatingStyles && item?.type["displayName"] === "ToggletipButton") refs.setReference(node);
+					if (enableFloatingStyles && !isPopoverContent) refs.setReference(node);
 					if (typeof ref === "function") ref(node);
 					else if (ref !== null && ref !== void 0) ref.current = node;
 				}

package/lib/components/RadioButton/RadioButton.js

@@ -10,8 +10,8 @@ const require_usePrefix = require('../../internal/usePrefix.js');
 const require_Text = require('../Text/Text.js');
 const require_useId = require('../../internal/useId.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
-const require_index = require('../AILabel/index.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../AILabel/index.js');
 const require_mergeRefs = require('../../tools/mergeRefs.js');
 const require_useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 let classnames = require("classnames");

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -9,8 +9,8 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.js');
 const require_usePrefix = require('../../internal/usePrefix.js');
 const require_useId = require('../../internal/useId.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
-const require_index = require('../AILabel/index.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../AILabel/index.js');
 const require_mergeRefs = require('../../tools/mergeRefs.js');
 const require_createTextComponent = require('../Text/createTextComponent.js');
 let classnames = require("classnames");

package/lib/components/RadioTile/RadioTile.js

@@ -13,9 +13,9 @@ const require_match = require('../../internal/keyboard/match.js');
 const require_useId = require('../../internal/useId.js');
 const require_noopFn = require('../../internal/noopFn.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
+const require_utils = require('../../internal/utils.js');
 const require_index = require('../FeatureFlags/index.js');
 const require_index$1 = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");

package/lib/components/Select/Select.js

@@ -9,8 +9,8 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.js');
 const require_usePrefix = require('../../internal/usePrefix.js');
 const require_Text = require('../Text/Text.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
-const require_index = require('../AILabel/index.js');
 const require_utils = require('../../internal/utils.js');
+const require_index = require('../AILabel/index.js');
 const require_events = require('../../tools/events.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
 const require_useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');