@carbon/react 1.104.1 → 1.105.0-rc.0

package/es/components/AISkeleton/AISkeletonPlaceholder.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * 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.

package/es/components/Checkbox/Checkbox.js

@@ -10,8 +10,8 @@ import { Text } from "../Text/Text.js";
 import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import classNames from "classnames";
 import React, { cloneElement } from "react";
 import PropTypes from "prop-types";

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import Checkbox$1 from "../Checkbox/Checkbox.js";
 import classNames from "classnames";
 import React, { Children, cloneElement } from "react";

package/es/components/ComboBox/ComboBox.js

@@ -11,10 +11,10 @@ import { End, Enter, Escape, Home, Space } from "../../internal/keyboard/keys.js
 import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { useFeatureFlag } from "../FeatureFlags/index.js";
-import { AILabel } from "../AILabel/index.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { AILabel } from "../AILabel/index.js";
 import { ListBoxSizePropType } from "../ListBox/ListBoxPropTypes.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import ListBox from "../ListBox/index.js";

package/es/components/ComposedModal/ComposedModal.js

@@ -11,9 +11,9 @@ import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
-import { isComponentElement } from "../../internal/utils.js";
 import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";

package/es/components/DataTable/TableDecoratorRow.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import classNames from "classnames";
 import React, { cloneElement } from "react";
 import PropTypes from "prop-types";

package/es/components/DataTable/TableExpandRow.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import TableCell from "./TableCell.js";
 import TableDecoratorRow from "./TableDecoratorRow.js";
 import TableSlugRow from "./TableSlugRow.js";

package/es/components/DataTable/TableHeader.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import { sortStates } from "./state/sortStates.js";
 import classNames from "classnames";
 import React, { cloneElement, forwardRef, useRef } from "react";

package/es/components/DataTable/TableRow.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import TableDecoratorRow from "./TableDecoratorRow.js";
 import TableSlugRow from "./TableSlugRow.js";
 import classNames from "classnames";

package/es/components/DataTable/tools/normalize.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { AILabel } from "../../AILabel/index.js";
 import { isComponentElement } from "../../../internal/utils.js";
+import { AILabel } from "../../AILabel/index.js";
 import { getCellId } from "./cells.js";
 
 //#region src/components/DataTable/tools/normalize.js

package/es/components/DatePicker/DatePicker.d.ts

@@ -61,10 +61,6 @@ export interface DatePickerProps {
      * Specify whether or not the control is invalid (Fluid only)
      */
     invalid?: boolean;
-    /**
-     * Provide the text that is displayed when the control is in error state (Fluid Only)
-     */
-    invalidText?: ReactNode;
     /**
      * `true` to use the light version.
      */
@@ -116,10 +112,6 @@ export interface DatePickerProps {
      * Specify whether the control is currently in warning state (Fluid only)
      */
     warn?: boolean;
-    /**
-     * Provide the text that is displayed when the control is in warning state (Fluid only)
-     */
-    warnText?: ReactNode;
     /**
      * Accessible aria-label for the "next month" arrow icon.
      */

package/es/components/DatePicker/DatePicker.js

@@ -10,19 +10,17 @@ import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
-import { FormContext } from "../FluidForm/FormContext.js";
 import DatePickerInput_default from "../DatePickerInput/index.js";
 import { appendToPlugin } from "./plugins/appendToPlugin.js";
-import fixEventsPlugin_default from "./plugins/fixEventsPlugin.js";
+import fixEventsPlugin from "./plugins/fixEventsPlugin.js";
 import { isEmptyDateValue } from "./utils.js";
 import { rangePlugin } from "./plugins/rangePlugin.js";
 import { useSavedCallback } from "../../internal/useSavedCallback.js";
 import { SUPPORTED_LOCALES } from "./DatePickerLocales.js";
 import classNames from "classnames";
-import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import flatpickr from "flatpickr";
 import l10n from "flatpickr/dist/l10n/index";
 import { datePartsOrder } from "@carbon/utilities";
@@ -129,9 +127,8 @@ function updateClassNames(calendar, prefix) {
 	}
 }
 const DatePicker = 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 = usePrefix();
-	const { isFluid } = useContext(FormContext);
 	const [hasInput, setHasInput] = useState(false);
 	const startInputField = useCallback((node) => {
 		if (node !== null) {
@@ -279,7 +276,7 @@ const DatePicker = forwardRef((props, ref) => {
 					classFlatpickrCurrentMonth: "cur-month",
 					locale
 				}),
-				fixEventsPlugin_default({
+				fixEventsPlugin({
 					inputFrom: startInputField.current,
 					inputTo: endInputField.current,
 					lastStartValue,
@@ -435,24 +432,6 @@ const DatePicker = forwardRef((props, ref) => {
 		startInputField
 	]);
 	let fluidError;
-	if (isFluid) {
-		if (invalid) fluidError = /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid` }),
-			/* @__PURE__ */ jsx("hr", { className: `${prefix}--date-picker__divider` }),
-			/* @__PURE__ */ jsx("div", {
-				className: `${prefix}--form-requirement`,
-				children: invalidText
-			})
-		] });
-		else if (warn) fluidError = /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn` }),
-			/* @__PURE__ */ jsx("hr", { className: `${prefix}--date-picker__divider` }),
-			/* @__PURE__ */ jsx("div", {
-				className: `${prefix}--form-requirement`,
-				children: warnText
-			})
-		] });
-	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: wrapperClasses,
 		ref,
@@ -480,7 +459,6 @@ DatePicker.propTypes = {
 	enable: PropTypes.array,
 	inline: PropTypes.bool,
 	invalid: PropTypes.bool,
-	invalidText: PropTypes.node,
 	light: deprecate(PropTypes.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: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(SUPPORTED_LOCALES)]),
 	maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -502,7 +480,6 @@ DatePicker.propTypes = {
 		PropTypes.number
 	]),
 	warn: PropTypes.bool,
-	warnText: PropTypes.node,
 	nextMonthAriaLabel: PropTypes.string,
 	prevMonthAriaLabel: PropTypes.string
 };

package/es/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/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -8,24 +8,16 @@
 import { ArrowDown, ArrowLeft, ArrowRight, Enter } from "../../../internal/keyboard/keys.js";
 import { match } from "../../../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,7 +47,7 @@ var fixEventsPlugin_default = (config) => (fp) => {
 		const { target } = event;
 		if (inputFrom === target || inputTo === target) {
 			if (match(event, Enter)) {
-				fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+				fp.setDate(inputTo ? [inputFrom.value, inputTo.value] : [inputFrom.value], true, fp.config.dateFormat);
 				event.stopPropagation();
 			} else if (match(event, ArrowLeft) || match(event, ArrowRight)) event.stopPropagation();
 			else if (match(event, ArrowDown)) {
@@ -77,11 +69,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 +127,4 @@ var fixEventsPlugin_default = (config) => (fp) => {
 };
 
 //#endregion
-export { fixEventsPlugin_default as default };
+export { fixEventsPlugin as default };

package/es/components/DatePickerInput/DatePickerInput.js

@@ -10,8 +10,8 @@ import { Text } from "../Text/Text.js";
 import { useId } from "../../internal/useId.js";
 import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { AILabel } from "../AILabel/index.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import classNames from "classnames";
@@ -110,7 +110,6 @@ const DatePickerInput = forwardRef((props, ref) => {
 						className: `${prefix}--date-picker-input-inner-wrapper--decorator`,
 						children: normalizedDecorator
 					}) : "",
-					isFluid && /* @__PURE__ */ jsx(DatePickerIcon, { datePickerType }),
 					/* @__PURE__ */ jsx(DatePickerIcon, {
 						datePickerType,
 						invalid: normalizedProps.invalid,

package/es/components/Dropdown/Dropdown.js

@@ -7,10 +7,10 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { useFeatureFlag } from "../FeatureFlags/index.js";
-import { AILabel } from "../AILabel/index.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { AILabel } from "../AILabel/index.js";
 import { ListBoxSizePropType, ListBoxTypePropType } from "../ListBox/ListBoxPropTypes.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import ListBox from "../ListBox/index.js";

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -20,7 +20,7 @@ import { jsx } from "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.forwardRef(function FluidDatePicker({ className, children, invalid, invalidText, readOnly, warn, warnText, ...other }, ref) {
+const FluidDatePicker = React.forwardRef(function FluidDatePicker({ className, children, invalid, readOnly, warn, ...other }, ref) {
 	const prefix = usePrefix();
 	const classNames$1 = classNames(className, {
 		[`${prefix}--date-picker--fluid`]: true,
@@ -32,10 +32,8 @@ const FluidDatePicker = React.forwardRef(function FluidDatePicker({ className, c
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(DatePicker_default, {
 			invalid,
-			invalidText,
 			readOnly,
 			warn,
-			warnText,
 			className: classNames$1,
 			ref,
 			...other,

package/es/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/es/components/Menu/MenuItem.js

@@ -10,8 +10,8 @@ import { Text } from "../Text/Text.js";
 import { ArrowRight as ArrowRight$1, Enter, Space } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
-import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { MenuContext } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { Menu as Menu$1 } from "./Menu.js";

package/es/components/Modal/Modal.js

@@ -13,13 +13,13 @@ import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { IconButton } from "../IconButton/index.js";
 import Button_default from "../Button/index.js";
 import ButtonSet_default from "../ButtonSet/index.js";
 import { AILabel } from "../AILabel/index.js";
-import { isComponentElement } from "../../internal/utils.js";
 import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { Layer } from "../Layer/index.js";

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,9 +11,9 @@ import { match } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { AILabel } from "../AILabel/index.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import Checkbox_default from "../Checkbox/index.js";
 import { ListBoxSizePropType, ListBoxTypePropType } from "../ListBox/ListBoxPropTypes.js";
 import { FormContext } from "../FluidForm/FormContext.js";
@@ -290,7 +290,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 					highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
 				};
 			case InputChange:
-				if (onInputValueChange) onInputValueChange(changes.inputValue);
+				if (onInputValueChange) onInputValueChange(changes);
 				setInputValue(changes.inputValue ?? "");
 				setIsOpen(true);
 				return {

package/es/components/MultiSelect/MultiSelect.js

@@ -12,10 +12,10 @@ import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { useFeatureFlag } from "../FeatureFlags/index.js";
-import { AILabel } from "../AILabel/index.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { AILabel } from "../AILabel/index.js";
 import Checkbox_default from "../Checkbox/index.js";
 import { ListBoxSizePropType, ListBoxTypePropType } from "../ListBox/ListBoxPropTypes.js";
 import { FormContext } from "../FluidForm/FormContext.js";

package/es/components/NumberInput/NumberInput.js

@@ -10,9 +10,9 @@ import { Text } from "../Text/Text.js";
 import { ArrowDown, ArrowUp as ArrowUp$1 } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { AILabel } from "../AILabel/index.js";
-import { isComponentElement } from "../../internal/utils.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { useControllableState } from "../../internal/useControllableState.js";
@@ -373,7 +373,7 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 							onChange: handleOnChange,
 							onKeyUp,
 							onKeyDown: (e) => {
-								if (type === "text") {
+								if (type === "text" && !readOnly && !disabled) {
 									if (match(e, ArrowUp$1)) handleStep(e, "up");
 									else if (match(e, ArrowDown)) handleStep(e, "down");
 								}

package/es/components/Pagination/Pagination.js

@@ -8,10 +8,11 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { IconButton } from "../IconButton/index.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, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight } from "@carbon/icons-react";
@@ -24,12 +25,14 @@ import isEqual from "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 = [];
@@ -42,30 +45,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.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 = usePrefix();
 	const inputId = useFallbackId(id?.toString());
 	const backBtnRef = useRef(null);
 	const forwardBtnRef = useRef(null);
-	const [pageSizes, setPageSizes] = useState(() => {
-		return mapPageSizesToObject(controlledPageSizes);
-	});
-	const [prevPageSizes, setPrevPageSizes] = useState(controlledPageSizes);
+	const pendingChangeRef = useRef(null);
+	const normalizedControlledPageSizes = useMemo(() => mapPageSizesToObject(controlledPageSizes), [controlledPageSizes]);
+	const prevControlledPageSize = usePreviousValue(controlledPageSize);
+	const prevControlledPageSizes = usePreviousValue(normalizedControlledPageSizes);
+	const [pageSizes, setPageSizes] = useState(normalizedControlledPageSizes);
 	const [page, setPage] = useState(controlledPage);
-	const [prevControlledPage, setPrevControlledPage] = useState(controlledPage);
 	const [focusTarget, setFocusTarget] = useState(null);
 	const [pageSize, setPageSize] = useState(() => {
-		return getPageSize(pageSizes, controlledPageSize);
+		return getPageSize(normalizedControlledPageSizes, controlledPageSize);
 	});
-	const [prevControlledPageSize, setPrevControlledPageSize] = useState(controlledPageSize);
 	const className = classNames({
 		[`${prefix}--pagination`]: true,
 		[`${prefix}--pagination--${size}`]: size,
@@ -99,22 +101,51 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", className
 			setFocusTarget(null);
 		}
 	}, [focusTarget]);
-	if (controlledPage !== prevControlledPage) {
+	useEffect(() => {
+		if (pendingChangeRef.current && onChange) {
+			onChange(pendingChangeRef.current);
+			pendingChangeRef.current = null;
+		}
+	}, [
+		onChange,
+		page,
+		pageSize
+	]);
+	useEffect(() => {
 		setPage(controlledPage);
-		setPrevControlledPage(controlledPage);
-	}
-	if (controlledPageSize !== prevControlledPageSize) {
-		setPageSize(getPageSize(pageSizes, controlledPageSize));
-		setPrevControlledPageSize(controlledPageSize);
-	}
-	if (!isEqual(controlledPageSizes, prevPageSizes)) {
-		const pageSizes = mapPageSizesToObject(controlledPageSizes);
-		if (!pageSizes.find((size) => {
+	}, [controlledPage]);
+	useEffect(() => {
+		if (typeof prevControlledPageSizes === "undefined" || isEqual(prevControlledPageSizes, normalizedControlledPageSizes)) return;
+		setPageSizes((prev) => isEqual(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
+	]);
+	useEffect(() => {
+		if (controlledPageSize === prevControlledPageSize) return;
+		setPageSize(getPageSize(normalizedControlledPageSizes, controlledPageSize));
+	}, [
+		controlledPageSize,
+		normalizedControlledPageSizes,
+		prevControlledPageSize
+	]);
 	function handleSizeChange(event) {
 		const changes = {
 			pageSize: Number(event.target.value),

package/es/components/Popover/index.js

@@ -8,6 +8,7 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useEvent, useWindowEvent } from "../../internal/useEvent.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
@@ -202,7 +203,9 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 	}, customClassName);
 	const mappedChildren = React.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 = 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.
@@ -211,8 +214,8 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 		* 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.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
 			const className = (item?.props)?.className;
 			const ref = (item?.props).ref;
@@ -220,7 +223,7 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 			return React.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;
 				}