@carbon/react 1.106.0 → 1.107.0

package/lib/components/DataTable/TableSlugRow.js

@@ -17,7 +17,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/DataTable/TableSlugRow.tsx
 /**
-* Copyright IBM Corp. 2016, 2025
+* 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.
@@ -27,16 +27,13 @@ const TableSlugRow = ({ className, slug }) => {
 		require_deprecateComponent.deprecateComponent("TableSlugRow", "The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.");
 	}, []);
 	const prefix = require_usePrefix.usePrefix();
-	const TableSlugRowClasses = (0, classnames.default)({
-		...className && { [className]: true },
-		[`${prefix}--table-column-slug`]: true,
-		[`${prefix}--table-column-slug--active`]: slug
-	});
-	let normalizedSlug;
-	if (slug) normalizedSlug = react.default.cloneElement(slug, { size: "mini" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-		className: TableSlugRowClasses,
-		children: normalizedSlug
+		className: (0, classnames.default)({
+			...className && { [className]: true },
+			[`${prefix}--table-column-slug`]: true,
+			[`${prefix}--table-column-slug--active`]: slug
+		}),
+		children: (0, react.isValidElement)(slug) ? (0, react.cloneElement)(slug, { size: "mini" }) : void 0
 	});
 };
 TableSlugRow.displayName = "TableSlugRow";

package/lib/components/DataTable/TableToolbarContent.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => import("react").ReactElement;
 export default TableToolbarContent;

package/lib/components/DataTable/TableToolbarSearch.d.ts

@@ -13,7 +13,7 @@ declare const translationIds: {
     readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
 };
 type TranslationKey = keyof typeof translationIds;
-type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
+type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex' | 'size';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
 /**
  * @deprecated Passing `''` as the event sentinel is legacy compatibility
@@ -69,6 +69,10 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
      * Provide an optional className for the overall container of the Search
      */
     searchContainerClass?: string;
+    /**
+     * Specify the size of the Search
+     */
+    size?: 'sm' | 'md' | 'lg';
     tabIndex?: number | string;
 }
 declare const TableToolbarSearch: {

package/lib/components/DatePicker/DatePicker.js

@@ -45,6 +45,7 @@ function initializeWeekdayShorthand() {
 	});
 }
 const forEach = Array.prototype.forEach;
+const defaultAriaDateFormat = "l, F j, Y";
 /**
 * @param {number} monthNumber The month number.
 * @param {boolean} shorthand `true` to use shorthand month.
@@ -170,7 +171,6 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 	const lastFocusedField = (0, react.useRef)(null);
 	const savedOnChange = require_useSavedCallback.useSavedCallback(onChange);
 	const savedOnOpen = require_useSavedCallback.useSavedCallback(onOpen);
-	const effectiveWarn = warn && !invalid;
 	const wrapperRef = (0, react.useRef)(null);
 	const datePickerClasses = (0, classnames.default)(`${prefix}--date-picker`, {
 		[`${prefix}--date-picker--short`]: short,
@@ -182,31 +182,35 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 	});
 	const wrapperClasses = (0, classnames.default)(`${prefix}--form-item`, { [String(className)]: className });
 	const childrenWithProps = react.default.Children.toArray(children).map((child, index) => {
+		const childInvalid = child.props?.invalid;
+		const childWarn = child.props?.warn;
+		const mergedInvalid = invalid ?? childInvalid;
+		const mergedWarn = mergedInvalid ? false : warn ?? childWarn;
 		if (index === 0 && require_utils.isComponentElement(child, require_index.default)) return react.default.cloneElement(child, {
 			datePickerType,
 			ref: startInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 		if (index === 1 && require_utils.isComponentElement(child, require_index.default)) return react.default.cloneElement(child, {
 			datePickerType,
 			ref: endInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 		if (index === 0) return react.default.cloneElement(child, {
 			ref: startInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 		if (index === 1) return react.default.cloneElement(child, {
 			ref: endInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 	});
 	(0, react.useEffect)(() => {
@@ -261,6 +265,7 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 			inline: inline ?? false,
 			onClose: onCalendarClose,
 			disableMobile: true,
+			ariaDateFormat: defaultAriaDateFormat,
 			defaultDate: value,
 			closeOnSelect,
 			mode: datePickerType,
@@ -345,7 +350,6 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 			const { target } = event;
 			if (target === start) lastStartValue.current = start.value;
 			if (start.value !== "") return;
-			if (!calendar.selectedDates) return;
 			if (calendar.selectedDates.length === 0) return;
 		}
 		function handleKeyPress(event) {
@@ -427,9 +431,7 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 	}, [value, startInputField]);
 	(0, react.useEffect)(() => {
 		if (calendarRef.current?.set) {
-			if (value !== void 0) if (value === "" || value === null || Array.isArray(value) && (value.length === 0 || value.every(require_utils$1.isEmptyDateValue))) {
-				if (calendarRef.current.selectedDates.length > 0) calendarRef.current.clear();
-			} else calendarRef.current.setDate(value);
+			if (!require_utils$1.isEmptyDateValue(value) && (!Array.isArray(value) || value.length > 0 && !value.every(require_utils$1.isEmptyDateValue))) calendarRef.current.setDate(value);
 			updateClassNames(calendarRef.current, prefix);
 		} else if (!calendarRef.current && typeof value !== "undefined" && value !== null) startInputField.current.value = value;
 	}, [

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

@@ -52,8 +52,7 @@ const fixEventsPlugin = (config) => (fp) => {
 				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)) {
+			} else if (require_match.match(event, require_keys.ArrowDown)) {
 				event.preventDefault();
 				fp.open();
 			} else if (!fp.config.allowInput) {

package/lib/components/Dropdown/Dropdown.d.ts

@@ -152,7 +152,7 @@ export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 interface DropdownComponent {
     <ItemType>(props: DropdownProps<ItemType> & {
         ref?: Ref<HTMLButtonElement>;
-    }): React.ReactElement<any> | null;
+    }): React.ReactElement | null;
 }
 declare const _default: DropdownComponent;
 export default _default;

package/lib/components/FluidTimePicker/FluidTimePicker.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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/lib/components/FluidTimePicker/FluidTimePicker.js

@@ -7,7 +7,9 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_utils = require("../../internal/utils.js");
 const require_index = require("../FluidTextInput/index.js");
+const require_index$1 = require("../FluidTimePickerSelect/index.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -18,7 +20,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _carbon_icons_react = require("@carbon/icons-react");
 //#region src/components/FluidTimePicker/FluidTimePicker.tsx
 /**
-* Copyright IBM Corp. 2022
+* Copyright IBM Corp. 2022, 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.
@@ -38,8 +40,8 @@ const FluidTimePicker = react.default.forwardRef(({ className, children, disable
 	};
 	const error = invalid || warn;
 	const childrenWithProps = () => {
-		if (disabled) return react.default.Children.toArray(children).map((child) => react.default.cloneElement(child, { disabled: true }));
-		if (readOnly) return react.default.Children.toArray(children).map((child) => react.default.cloneElement(child, { readOnly: true }));
+		if (disabled) return react.default.Children.toArray(children).map((child) => require_utils.isComponentElement(child, require_index$1.default) ? (0, react.cloneElement)(child, { disabled: true }) : child);
+		if (readOnly) return react.default.Children.toArray(children).map((child) => require_utils.isComponentElement(child, require_index$1.default) ? (0, react.cloneElement)(child, { readOnly: true }) : child);
 		return children;
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts

@@ -36,6 +36,10 @@ export interface FluidTimePickerSelectProps {
      * the underlying `<input>` changes
      */
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the component is read-only.
+     */
+    readOnly?: boolean;
 }
 declare const FluidTimePickerSelect: React.ForwardRefExoticComponent<FluidTimePickerSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default FluidTimePickerSelect;

package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -34,7 +34,8 @@ FluidTimePickerSelect.propTypes = {
 	disabled: prop_types.default.bool,
 	id: prop_types.default.string.isRequired,
 	labelText: prop_types.default.node,
-	onChange: prop_types.default.func
+	onChange: prop_types.default.func,
+	readOnly: prop_types.default.bool
 };
 //#endregion
 exports.default = FluidTimePickerSelect;

package/lib/components/FluidTimePickerSelect/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+//#region src/components/FluidTimePickerSelect/index.tsx
+/**
+* Copyright IBM Corp. 2022
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var FluidTimePickerSelect_default = require("./FluidTimePickerSelect.js").default;
+//#endregion
+exports.default = FluidTimePickerSelect_default;

package/lib/components/Grid/CSSGrid.js

@@ -22,7 +22,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 CSSGrid = react.default.forwardRef(({ align, as, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, ...rest }, ref) => {
+const CSSGrid = react.default.forwardRef(({ align, as, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, withRowGap, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const { subgrid } = require_GridContext.useGridSettings();
 	let mode = "wide";
@@ -36,6 +36,7 @@ const CSSGrid = react.default.forwardRef(({ align, as, children, className: cust
 			as,
 			className: customClassName,
 			mode,
+			withRowGap,
 			...rest,
 			children
 		})
@@ -46,7 +47,8 @@ const CSSGrid = react.default.forwardRef(({ align, as, children, className: cust
 		[`${prefix}--css-grid--narrow`]: mode === "narrow",
 		[`${prefix}--css-grid--full-width`]: fullWidth,
 		[`${prefix}--css-grid--start`]: align === "start",
-		[`${prefix}--css-grid--end`]: align === "end"
+		[`${prefix}--css-grid--end`]: align === "end",
+		[`${prefix}--css-grid--with-row-gap`]: withRowGap
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GridContext.GridSettings, {
 		mode: "css-grid",
@@ -70,15 +72,17 @@ CSSGrid.propTypes = {
 	className: prop_types.default.string,
 	condensed: prop_types.default.bool,
 	fullWidth: prop_types.default.bool,
-	narrow: prop_types.default.bool
+	narrow: prop_types.default.bool,
+	withRowGap: prop_types.default.bool
 };
-const Subgrid = react.default.forwardRef(({ as, className: customClassName, children, mode, ...rest }, ref) => {
+const Subgrid = react.default.forwardRef(({ as, className: customClassName, children, mode, withRowGap, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const className = (0, classnames.default)(customClassName, {
 		[`${prefix}--subgrid`]: true,
 		[`${prefix}--subgrid--condensed`]: mode === "condensed",
 		[`${prefix}--subgrid--narrow`]: mode === "narrow",
-		[`${prefix}--subgrid--wide`]: mode === "wide"
+		[`${prefix}--subgrid--wide`]: mode === "wide",
+		[`${prefix}--subgrid--with-row-gap`]: withRowGap
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as || "div", {
 		...rest,
@@ -95,7 +99,8 @@ Subgrid.propTypes = {
 		"wide",
 		"narrow",
 		"condensed"
-	])
+	]),
+	withRowGap: prop_types.default.bool
 };
 const CSSGridComponent = CSSGrid;
 //#endregion

package/lib/components/Grid/Column.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type ReactElement } from 'react';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
 type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
@@ -67,7 +67,7 @@ export interface ColumnBaseProps {
 }
 export type ColumnProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ColumnBaseProps>;
 export interface ColumnComponent {
-    <T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType>(props: ColumnProps<T>, context?: any): ReactElement | null;
 }
 declare const _default: ColumnComponent;
 export default _default;

package/lib/components/Grid/ColumnHang.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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 React from 'react';
+import React, { type ReactElement } from 'react';
 import { PolymorphicProps } from '../../types/common';
 interface ColumnHangBaseProps {
     /**
@@ -18,7 +18,7 @@ interface ColumnHangBaseProps {
 }
 export type ColumnHangProps<T extends React.ElementType> = PolymorphicProps<T, ColumnHangBaseProps>;
 export interface ColumnHangComponent {
-    <T extends React.ElementType>(props: ColumnHangProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType>(props: ColumnHangProps<T>, context?: any): ReactElement | null;
 }
 declare const ColumnHangComponent: ColumnHangComponent;
 export { ColumnHangComponent as ColumnHang };

package/lib/components/Grid/ColumnHang.js

@@ -16,7 +16,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Grid/ColumnHang.tsx
 /**
-* Copyright IBM Corp. 2016, 2023
+* 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/lib/components/Grid/FlexGrid.js

@@ -22,13 +22,14 @@ 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 FlexGrid = react.default.forwardRef(({ as, condensed = false, narrow = false, fullWidth = false, className: containerClassName, children, ...rest }, ref) => {
+const FlexGrid = react.default.forwardRef(({ as, condensed = false, narrow = false, fullWidth = false, withRowGap = false, className: containerClassName, children, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const className = (0, classnames.default)(containerClassName, {
 		[`${prefix}--grid`]: true,
 		[`${prefix}--grid--condensed`]: condensed,
 		[`${prefix}--grid--narrow`]: narrow,
-		[`${prefix}--grid--full-width`]: fullWidth
+		[`${prefix}--grid--full-width`]: fullWidth,
+		[`${prefix}--grid--with-row-gap`]: withRowGap
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GridContext.GridSettings, {
 		mode: "flexbox",
@@ -47,7 +48,8 @@ FlexGrid.propTypes = {
 	className: prop_types.default.string,
 	condensed: prop_types.default.bool,
 	fullWidth: prop_types.default.bool,
-	narrow: prop_types.default.bool
+	narrow: prop_types.default.bool,
+	withRowGap: prop_types.default.bool
 };
 const FlexGridComponent = FlexGrid;
 //#endregion

package/lib/components/Grid/Grid.js

@@ -36,7 +36,8 @@ Grid.propTypes = {
 	className: prop_types.default.string,
 	condensed: prop_types.default.bool,
 	fullWidth: prop_types.default.bool,
-	narrow: prop_types.default.bool
+	narrow: prop_types.default.bool,
+	withRowGap: prop_types.default.bool
 };
 const GridAsGridComponent = Grid;
 //#endregion

package/lib/components/Grid/GridTypes.d.ts

@@ -33,6 +33,11 @@ export interface GridBaseProps {
      * typographic alignment with and without containers.
      */
     narrow?: boolean;
+    /**
+     * Add a row gap to the grid that matches the current gutter size.
+     * This is useful when you want consistent vertical spacing between rows.
+     */
+    withRowGap?: boolean;
 }
 export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, GridBaseProps>;
 export interface GridComponent {

package/lib/components/Grid/Row.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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 React from 'react';
+import React, { type ReactElement } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export interface RowBaseProps {
     /**
@@ -28,7 +28,7 @@ export interface RowBaseProps {
 }
 export type RowProps<T extends React.ElementType> = PolymorphicProps<T, RowBaseProps>;
 export interface RowComponent {
-    <T extends React.ElementType>(props: RowProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType>(props: RowProps<T>, context?: any): ReactElement | null;
 }
 declare const _default: RowComponent;
 export default _default;

package/lib/components/Grid/Row.js

@@ -16,7 +16,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Grid/Row.tsx
 /**
-* Copyright IBM Corp. 2016, 2023
+* 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/lib/components/Menu/Menu.js

@@ -112,7 +112,7 @@ const Menu = (0, react.forwardRef)(function Menu({ backgroundToken = "layer", bo
 		}
 	}
 	function handleBlur(e) {
-		if (open && onClose && isRoot && e.relatedTarget && !menu.current?.contains(e.relatedTarget)) handleClose();
+		if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) handleClose();
 	}
 	function fitValue(range, axis) {
 		if (!menu.current) return;

package/lib/components/Menu/MenuItem.js

@@ -88,6 +88,9 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
 	}
 	const pendingKeyboardClick = (0, react.useRef)(false);
 	const keyboardClickEvent = (e) => require_match.match(e, require_keys.Enter) || require_match.match(e, require_keys.Space);
+	function handleMouseDown(e) {
+		if (isDisabled) e.preventDefault();
+	}
 	function handleKeyDown(e) {
 		if (hasChildren && require_match.match(e, require_keys.ArrowRight)) {
 			openSubmenu();
@@ -142,6 +145,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
 			"aria-disabled": isDisabled ?? void 0,
 			"aria-haspopup": hasChildren ?? void 0,
 			"aria-expanded": hasChildren ? submenuOpen : void 0,
+			onMouseDown: handleMouseDown,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
 			onKeyUp: handleKeyUp,

package/lib/components/Modal/Modal.d.ts

@@ -57,7 +57,7 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
+    launcherButtonRef?: RefObject<HTMLElement | null>;
     /**
      * Specify the description for the loading text
      */

package/lib/components/Modal/Modal.js

@@ -10,6 +10,7 @@ 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_noopFn = require("../../internal/noopFn.js");
 const require_warning = require("../../internal/warning.js");
@@ -140,6 +141,9 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		}
 		const modalContent = document.querySelector(`.${prefix}--modal-content`);
 		if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) return;
+		const modalRect = modalContent.getBoundingClientRect();
+		const elementRect = currentActiveNode.getBoundingClientRect();
+		if (elementRect.top >= modalRect.top && elementRect.bottom <= modalRect.bottom) return;
 		currentActiveNode.scrollIntoView({ block: "center" });
 	}
 	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
@@ -210,25 +214,35 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		prefix,
 		enableDialogElement
 	]);
+	const focusLauncherButton = (0, react.useCallback)(() => {
+		if (!launcherButtonRef || !launcherButtonRef.current) return;
+		const { current: launcherButton } = launcherButtonRef;
+		(launcherButton.matches(require_navigation.selectorTabbable) ? launcherButton : launcherButton.querySelector(require_navigation.selectorTabbable))?.focus();
+	}, [launcherButtonRef]);
 	(0, react.useEffect)(() => {
 		if (!enableDialogElement && !enablePresence && prevOpen && !open && launcherButtonRef) setTimeout(() => {
-			if ("current" in launcherButtonRef) launcherButtonRef.current?.focus();
+			focusLauncherButton();
 		});
 	}, [
 		open,
 		prevOpen,
 		launcherButtonRef,
 		enableDialogElement,
-		enablePresence
+		enablePresence,
+		focusLauncherButton
 	]);
 	(0, react.useEffect)(() => {
 		const launcherButton = launcherButtonRef?.current;
 		return () => {
 			if (enablePresence && launcherButton) setTimeout(() => {
-				launcherButton.focus();
+				focusLauncherButton();
 			});
 		};
-	}, [enablePresence, launcherButtonRef]);
+	}, [
+		enablePresence,
+		launcherButtonRef,
+		focusLauncherButton
+	]);
 	(0, react.useEffect)(() => {
 		if (!enableDialogElement) {
 			const initialFocus = (focusContainerElement) => {
@@ -464,7 +478,7 @@ Modal.propTypes = {
 	hasScrollingContent: prop_types.default.bool,
 	id: prop_types.default.string,
 	isFullWidth: prop_types.default.bool,
-	launcherButtonRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.oneOfType([typeof HTMLButtonElement !== "undefined" ? prop_types.default.instanceOf(HTMLButtonElement) : prop_types.default.any, prop_types.default.oneOf([null])]).isRequired })]),
+	launcherButtonRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.oneOfType([typeof HTMLElement !== "undefined" ? prop_types.default.instanceOf(HTMLElement) : prop_types.default.any, prop_types.default.oneOf([null])]).isRequired })]),
 	loadingDescription: prop_types.default.string,
 	loadingIconDescription: prop_types.default.string,
 	loadingStatus: prop_types.default.oneOf([

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -195,7 +195,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const FilterableMultiSelect: {
-    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement<any>;
+    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement;
     propTypes?: any;
     contextTypes?: any;
     defaultProps?: any;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -14,6 +14,7 @@ const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_defaultItemToString = require("../../internal/defaultItemToString.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_index = require("../AILabel/index.js");
 const require_index$1 = require("../Checkbox/index.js");
@@ -181,7 +182,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		[`${prefix}--list-box__wrapper--decorator`]: decorator,
 		[`${prefix}--autoalign`]: autoAlign
 	});
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
 	const labelId = `${id}-label`;
 	const titleClasses = (0, classnames.default)({
@@ -400,7 +401,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 	});
 	const inputProp = getInputProps(getDropdownProps({
 		"aria-controls": isOpen ? menuId : void 0,
-		"aria-describedby": helperText && showHelperText ? helperId : void 0,
+		"aria-describedby": hasHelper && showHelperText ? helperId : void 0,
 		"aria-haspopup": "listbox",
 		"aria-labelledby": void 0,
 		disabled,

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -178,6 +178,6 @@ type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectPr
 interface MultiSelectComponent {
     propTypes: Record<string, any>;
     displayName: string;
-    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement<any> | null;
+    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement | null;
 }
 export {};

package/lib/components/NumberInput/NumberInput.js

@@ -273,7 +273,7 @@ const NumberInput = react.default.forwardRef((props, forwardRef) => {
 				value: allowEmpty && event.target.value === "" ? "" : Number(event.target.value),
 				direction: value < event.target.value ? "up" : "down"
 			};
-			setValue(state.value);
+			if (controlledValue === void 0) setValue(state.value);
 			if (onChange) onChange(event, state);
 			return;
 		}
@@ -316,7 +316,9 @@ const NumberInput = react.default.forwardRef((props, forwardRef) => {
 				value: newValue,
 				direction
 			};
-			if (type === "number") setValue(state.value);
+			if (type === "number") {
+				if (controlledValue === void 0) setValue(state.value);
+			}
 			if (type === "text") {
 				const formattedNewValue = format(newValue);
 				const parsedFormattedNewValue = numberParser.parse(formattedNewValue);