@carbon/react 1.112.0-rc.0 → 1.113.0-rc.0

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ const defaultTranslateWithId = (messageId) => {
 */
 const ListBoxMenuIcon = ({ isOpen, translateWithId: t = defaultTranslateWithId }) => {
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--list-box__menu-icon`, { [`${prefix}--list-box__menu-icon--open`]: isOpen });
+	const className = cx(`${prefix}--list-box__menu-icon`, { [`${prefix}--list-box__menu-icon--open`]: isOpen });
 	const description = isOpen ? t("close.menu") : t("open.menu");
 	return /* @__PURE__ */ jsx("div", {
 		className,

package/es/components/ListBox/ListBoxMenuItem.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
-import classNames from "classnames";
 import { forwardRef, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ListBox/ListBoxMenuItem.tsx
@@ -51,8 +51,9 @@ const useIsTruncated = (forwardedRef, deps = []) => {
 */
 const ListBoxMenuItem = forwardRef(({ children, isActive = false, isHighlighted = false, title, ...rest }, forwardedRef) => {
 	const prefix = usePrefix();
-	const { isTruncated, ref: menuItemOptionRef } = useIsTruncated(forwardedRef && typeof forwardedRef !== "function" ? forwardedRef.menuItemOptionRef : void 0, [children]);
-	const className = classNames(`${prefix}--list-box__menu-item`, {
+	const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef.menuItemOptionRef : void 0;
+	const { isTruncated, ref: menuItemOptionRef } = useIsTruncated(menuItemOptionRefProp, [children]);
+	const className = cx(`${prefix}--list-box__menu-item`, {
 		[`${prefix}--list-box__menu-item--active`]: isActive,
 		[`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
 	});

package/es/components/ListBox/ListBoxSelection.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -38,7 +38,7 @@ const ListBoxSelection = ({ clearSelection, selectionCount, translateWithId: t =
 	const prefix = usePrefix();
 	const hasSelectionCount = (selectionCount ?? 0) > 0;
 	const hasMultipleSelections = (selectionCount ?? 0) > 1;
-	const className = classNames(`${prefix}--list-box__selection`, {
+	const className = cx(`${prefix}--list-box__selection`, {
 		[`${prefix}--tag--filter`]: hasSelectionCount,
 		[`${prefix}--list-box__selection--multi`]: hasSelectionCount
 	});
@@ -49,7 +49,7 @@ const ListBoxSelection = ({ clearSelection, selectionCount, translateWithId: t =
 		if (onClearSelection) onClearSelection(event);
 	};
 	const description = hasMultipleSelections ? t("clear.all") : t("clear.selection");
-	const tagClasses = classNames(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
+	const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
 	return hasSelectionCount ? /* @__PURE__ */ jsxs("div", {
 		className: tagClasses,
 		children: [/* @__PURE__ */ jsx("span", {

package/es/components/ListBox/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "./ListBoxPropTypes.js";
+import { ListBoxSizePropType, ListBoxTypePropType } from "./ListBoxPropTypes.js";
 import ListBox$1 from "./ListBox.js";
 import ListBoxField from "./ListBoxField.js";
 import ListBoxMenuItem from "./ListBoxMenuItem.js";
@@ -21,4 +21,4 @@ const ListBox = Object.assign(ListBox$1, {
 	Selection: ListBoxSelection
 });
 //#endregion
-export { ListBox as default };
+export { ListBoxSizePropType, ListBoxTypePropType, ListBox as default };

package/es/components/ListBox/next/ListBoxSelection.d.ts

@@ -56,6 +56,11 @@ export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
      * clear selection element fires a mouseup event
      */
     onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onMouseDown` handler that is called when the underlying
+     * clear selection element fires a mousedown event
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
 }
 declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, readOnly, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListBoxSelection {
@@ -84,8 +89,13 @@ declare namespace ListBoxSelection {
          */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
-         * Specify an optional `onClick` handler that is called when the underlying
-         * clear selection element is clicked
+         * Specify an optional `onMouseDown` handler that is called when the underlying
+         * clear selection element fires a mousedown event
+         */
+        onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onMouseUp` handler that is called when the underlying
+         * clear selection element fires a mouseup event
          */
         onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
         /**

package/es/components/ListBox/next/ListBoxSelection.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -38,12 +38,12 @@ function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t =
 	const prefix = usePrefix();
 	const hasSelectionCount = (selectionCount ?? 0) > 0;
 	const hasMultipleSelections = (selectionCount ?? 0) > 1;
-	const className = classNames(`${prefix}--list-box__selection`, {
+	const className = cx(`${prefix}--list-box__selection`, {
 		[`${prefix}--tag--filter`]: hasSelectionCount,
 		[`${prefix}--list-box__selection--multi`]: hasSelectionCount
 	});
 	const description = hasMultipleSelections ? t("clear.all") : t("clear.selection");
-	const tagClasses = classNames(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
+	const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
 	function onClick(event) {
 		event.stopPropagation();
 		if (disabled || readOnly) return;
@@ -106,8 +106,13 @@ ListBoxSelection.propTypes = {
 	*/
 	onClick: PropTypes.func,
 	/**
-	* Specify an optional `onClick` handler that is called when the underlying
-	* clear selection element is clicked
+	* Specify an optional `onMouseDown` handler that is called when the underlying
+	* clear selection element fires a mousedown event
+	*/
+	onMouseDown: PropTypes.func,
+	/**
+	* Specify an optional `onMouseUp` handler that is called when the underlying
+	* clear selection element fires a mouseup event
 	*/
 	onMouseUp: PropTypes.func,
 	/**

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../../internal/usePrefix.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ const defaultTranslateWithId = (messageId) => {
 */
 const ListBoxTrigger = React.forwardRef(({ isOpen, translateWithId: t = defaultTranslateWithId, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--list-box__menu-icon`]: true,
 		[`${prefix}--list-box__menu-icon--open`]: isOpen
 	});

package/es/components/ListItem/ListItem.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ListItem/ListItem.tsx
@@ -21,7 +21,7 @@ import { jsx } from "react/jsx-runtime";
 function ListItem({ className, children, ...other }) {
 	return /* @__PURE__ */ jsx(Text, {
 		as: "li",
-		className: classNames(`${usePrefix()}--list__item`, className),
+		className: cx(`${usePrefix()}--list__item`, className),
 		...other,
 		children
 	});

package/es/components/Loading/Loading.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loading/Loading.tsx
@@ -20,12 +20,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function Loading({ active = true, className: customClassName, withOverlay = true, small = false, description = "loading", ...rest }) {
 	const prefix = usePrefix();
-	const loadingClassName = classNames(customClassName, {
+	const loadingClassName = cx(customClassName, {
 		[`${prefix}--loading`]: true,
 		[`${prefix}--loading--small`]: small,
 		[`${prefix}--loading--stop`]: !active
 	});
-	const overlayClassName = classNames({
+	const overlayClassName = cx({
 		[`${prefix}--loading-overlay`]: true,
 		[`${prefix}--loading-overlay--stop`]: !active
 	});

package/es/components/Loading/index.js

@@ -15,4 +15,4 @@ import Loading from "./Loading.js";
 */
 var Loading_default = Loading;
 //#endregion
-export { Loading_default as default };
+export { Loading, Loading_default as default };

package/es/components/Menu/Menu.js

@@ -13,8 +13,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { MenuContext, menuReducer } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { canUseDOM } from "../../internal/environment.js";
-import classNames from "classnames";
 import { forwardRef, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -184,7 +184,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		if (open) handleOpen();
 		else setPosition([-1, -1]);
 	}, [open]);
-	const classNames$1 = classNames(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
+	const classNames = cx(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
 		[`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === "top",
 		[`${prefix}--menu--open`]: open,
 		[`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
@@ -198,7 +198,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		value: childContext,
 		children: /* @__PURE__ */ jsx("ul", {
 			...rest,
-			className: classNames$1,
+			className: classNames,
 			role: "menu",
 			ref,
 			"aria-label": label,

package/es/components/Menu/MenuItem.js

@@ -16,8 +16,8 @@ import { MenuContext } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { Menu as Menu$1 } from "./Menu.js";
 import { useControllableState } from "../../internal/useControllableState.js";
-import classNames from "classnames";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight, Checkmark } from "@carbon/icons-react";
@@ -112,7 +112,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 		if (pendingKeyboardClick.current && keyboardClickEvent(e)) handleClick(e);
 		pendingKeyboardClick.current = false;
 	}
-	const classNames$1 = classNames(className, `${prefix}--menu-item`, {
+	const classNames = cx(className, `${prefix}--menu-item`, {
 		[`${prefix}--menu-item--disabled`]: isDisabled,
 		[`${prefix}--menu-item--danger`]: isDanger
 	});
@@ -145,7 +145,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 			role: "menuitem",
 			...rest,
 			ref,
-			className: classNames$1,
+			className: classNames,
 			tabIndex: !disabled ? 0 : -1,
 			"aria-disabled": isDisabled ?? void 0,
 			"aria-haspopup": hasChildren ?? void 0,
@@ -249,12 +249,12 @@ const MenuItemSelectable = forwardRef(function MenuItemSelectable({ className, d
 	useEffect(() => {
 		if (!context.state.hasSelectableItems) context.dispatch({ type: "enableSelectableItems" });
 	}, [context.state.hasSelectableItems, context]);
-	const classNames$2 = classNames(className, `${prefix}--menu-item-selectable--selected`);
+	const classNames = cx(className, `${prefix}--menu-item-selectable--selected`);
 	return /* @__PURE__ */ jsx(MenuItem, {
 		...rest,
 		ref: forwardRef,
 		label,
-		className: classNames$2,
+		className: classNames,
 		role: "menuitemcheckbox",
 		"aria-checked": checked,
 		onClick: handleClick
@@ -284,7 +284,7 @@ MenuItemSelectable.propTypes = {
 };
 const MenuItemGroup = forwardRef(function MenuItemGroup({ children, className, label, ...rest }, forwardRef) {
 	return /* @__PURE__ */ jsx("li", {
-		className: classNames(className, `${usePrefix()}--menu-item-group`),
+		className: cx(className, `${usePrefix()}--menu-item-group`),
 		role: "none",
 		ref: forwardRef,
 		children: /* @__PURE__ */ jsx("ul", {
@@ -324,7 +324,7 @@ const MenuItemRadioGroup = forwardRef(function MenuItemRadioGroup({ className, d
 		if (!context.state.hasSelectableItems) context.dispatch({ type: "enableSelectableItems" });
 	}, [context.state.hasSelectableItems, context]);
 	return /* @__PURE__ */ jsx("li", {
-		className: classNames(className, `${prefix}--menu-item-radio-group`),
+		className: cx(className, `${prefix}--menu-item-radio-group`),
 		role: "none",
 		ref: forwardRef,
 		children: /* @__PURE__ */ jsx("ul", {
@@ -373,10 +373,10 @@ MenuItemRadioGroup.propTypes = {
 	selectedItem: PropTypes.any
 };
 const MenuItemDivider = forwardRef(function MenuItemDivider({ className, ...rest }, forwardRef) {
-	const classNames$3 = classNames(className, `${usePrefix()}--menu-item-divider`);
+	const classNames = cx(className, `${usePrefix()}--menu-item-divider`);
 	return /* @__PURE__ */ jsx("li", {
 		...rest,
-		className: classNames$3,
+		className: classNames,
 		role: "separator",
 		ref: forwardRef
 	});

package/es/components/MenuButton/index.js

@@ -13,8 +13,8 @@ import Button_default from "../Button/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Menu as Menu$1 } from "../Menu/Menu.js";
 import { useAttachedMenu } from "../../internal/useAttachedMenu.js";
-import classNames from "classnames";
 import { forwardRef, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -74,9 +74,9 @@ const MenuButton = forwardRef(({ children, className, disabled, kind = defaultBu
 	function handleClick() {
 		if (triggerRef.current) hookOnClick();
 	}
-	const containerClasses = classNames(`${prefix}--menu-button__container`, className);
-	const triggerClasses = classNames(`${prefix}--menu-button__trigger`, { [`${prefix}--menu-button__trigger--open`]: open });
-	const menuClasses = classNames(`${prefix}--menu-button__${menuAlignment}`);
+	const containerClasses = cx(`${prefix}--menu-button__container`, className);
+	const triggerClasses = cx(`${prefix}--menu-button__trigger`, { [`${prefix}--menu-button__trigger--open`]: open });
+	const menuClasses = cx(`${prefix}--menu-button__${menuAlignment}`);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		ref,

package/es/components/Modal/Modal.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 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";
@@ -32,8 +32,8 @@ import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
 import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
-import classNames from "classnames";
 import React, { cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -88,7 +88,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
 	const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
 	const modalCloseButtonClass = `${prefix}--modal-close`;
-	const primaryButtonClass = classNames({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
+	const primaryButtonClass = cx({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
 	const loadingActive = loadingStatus !== "inactive";
 	const presenceContext = useContext(ModalPresenceContext);
 	const mergedRefs = useMergedRefs([
@@ -155,7 +155,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	}
 	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
 	const { height } = useResizeObserver({ ref: contentRef });
-	const modalClasses = classNames(`${prefix}--modal`, {
+	const modalClasses = cx(`${prefix}--modal`, {
 		[`${prefix}--modal-tall`]: !passiveModal,
 		"is-visible": enablePresence || open,
 		[`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
@@ -163,7 +163,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		[`${prefix}--modal--slug`]: slug,
 		[`${prefix}--modal--decorator`]: decorator
 	}, className);
-	const containerClasses = classNames(`${prefix}--modal-container`, {
+	const containerClasses = cx(`${prefix}--modal-container`, {
 		[`${prefix}--modal-container--${size}`]: size,
 		[`${prefix}--modal-container--full-width`]: isFullWidth
 	});
@@ -179,11 +179,11 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		if (diff > 5) setIsScrollable(true);
 		else if (diff < -5) setIsScrollable(false);
 	}, [currentScrollHeight, currentClientHeight]);
-	const contentClasses = classNames(`${prefix}--modal-content`, {
+	const contentClasses = cx(`${prefix}--modal-content`, {
 		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300
 	});
-	const footerClasses = classNames(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
+	const footerClasses = cx(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
 	const asStringOrUndefined = (node) => {
 		return typeof node === "string" ? node : void 0;
 	};
@@ -302,8 +302,8 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		focusAfterCloseRef: launcherButtonRef,
 		modal: true,
 		ref: innerModal,
-		role: isAlertDialog ? "alertdialog" : "",
-		"aria-describedby": isAlertDialog ? modalBodyId : "",
+		role: isAlertDialog ? "alertdialog" : void 0,
+		"aria-describedby": isAlertDialog ? modalBodyId : void 0,
 		className: containerClasses,
 		"aria-label": ariaLabel,
 		"data-exiting": presenceContext?.isExiting || void 0,
@@ -654,4 +654,4 @@ Modal.propTypes = {
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.")
 };
 //#endregion
-export { Modal as default };
+export { ModalSizes, Modal as default };

package/es/components/Modal/ModalPresence.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePresenceContext } from "../../internal/usePresenceContext.js";
+import { PresenceHoldContext, usePresenceContext } from "../../internal/usePresenceContext.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Modal/ModalPresence.tsx
@@ -24,7 +24,10 @@ const ModalPresence = ({ open, _presenceId: presenceId, _autoEnablePresence: aut
 	if (!isPresent) return null;
 	return /* @__PURE__ */ jsx(ModalPresenceContext.Provider, {
 		value: contextValue,
-		children
+		children: /* @__PURE__ */ jsx(PresenceHoldContext.Provider, {
+			value: contextValue,
+			children
+		})
 	});
 };
 const ModalPresenceContext = createContext(void 0);

package/es/components/Modal/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "./ModalPresence.js";
+import { ModalPresence, withModalPresence } from "./ModalPresence.js";
 import Modal from "./Modal.js";
 //#region src/components/Modal/index.ts
 /**
@@ -16,4 +16,4 @@ import Modal from "./Modal.js";
 */
 var Modal_default = Modal;
 //#endregion
-export { Modal_default as default };
+export { Modal, ModalPresence, Modal_default as default, withModalPresence };

package/es/components/ModalWrapper/ModalWrapper.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Escape } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { ButtonKinds } from "../Button/Button.js";
 import Button_default from "../Button/index.js";
 import Modal_default from "../Modal/index.js";

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -29,8 +29,8 @@ import { sortingPropTypes } from "./MultiSelectPropTypes.js";
 import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -44,7 +44,7 @@ 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.
 */
-const { InputBlur, InputKeyDownEnter, ItemClick, MenuMouseLeave, InputKeyDownArrowUp, InputKeyDownArrowDown, ItemMouseMove, InputClick, ToggleButtonClick, FunctionToggleMenu, InputChange, InputKeyDownEscape, FunctionSetHighlightedIndex } = useCombobox.stateChangeTypes;
+const { InputBlur, InputKeyDownEnter, ItemClick, MenuMouseLeave, InputKeyDownArrowUp, InputKeyDownArrowDown, ItemMouseMove, InputClick, ToggleButtonClick, FunctionToggleMenu, InputChange, InputKeyDownEscape, FunctionSetHighlightedIndex, FunctionSetInputValue } = useCombobox.stateChangeTypes;
 const { SelectedItemKeyDownBackspace, SelectedItemKeyDownDelete, DropdownKeyDownBackspace, FunctionRemoveSelectedItem } = useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAlign = false, className: containerClassName, clearSelectionDescription = "Total items selected: ", clearSelectionText = "To clear selection, press Delete or Backspace", compareItems = defaultCompareItems, decorator, direction = "bottom", disabled = false, downshiftProps, filterItems = defaultFilterItems, helperText, hideLabel, id, initialSelectedItems = [], invalid = false, invalidText, items, itemToElement: ItemToElement, itemToString = defaultItemToString, light, locale = "en", onInputValueChange, open = false, onChange, onMenuChange, placeholder, readOnly, titleText, type, selectionFeedback = "top-after-reopen", selectedItems: selected, size: size$1, sortItems = defaultSortItems, translateWithId, useTitleInItem, warn = false, warnText, slug, inputProps }, ref) {
 	const { isFluid } = useContext(FormContext);
@@ -84,8 +84,10 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const handleSelectAllClick = useCallback(() => {
 		const selectable = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const { checked, indeterminate } = selectAllStatus;
-		if (checked || indeterminate) toggleAll(controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel))));
-		else {
+		if (checked || indeterminate) {
+			const remainingSelectedItems = controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel)));
+			toggleAll(remainingSelectedItems);
+		} else {
 			const toSelect = selectable.filter((e) => !controlledSelectedItems.some((sel) => isEqual(sel, e)));
 			toggleAll([...controlledSelectedItems, ...toSelect]);
 		}
@@ -167,7 +169,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const inline = type === "inline";
 	const showWarning = normalizedProps.warn;
 	const showHelperText = !normalizedProps.warn && !normalizedProps.invalid;
-	const wrapperClasses = classNames(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--multi-select__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
@@ -181,16 +183,16 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
 	const labelId = `${id}-label`;
-	const titleClasses = classNames({
+	const titleClasses = cx({
 		[`${prefix}--label`]: true,
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
-	const helperClasses = classNames({
+	const helperClasses = cx({
 		[`${prefix}--form__helper-text`]: true,
 		[`${prefix}--form__helper-text--disabled`]: disabled
 	});
-	const inputClasses = classNames({
+	const inputClasses = cx({
 		[`${prefix}--text-input`]: true,
 		[`${prefix}--text-input--empty`]: !inputValue,
 		[`${prefix}--text-input--light`]: light
@@ -364,15 +366,22 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	});
 	function clearInputValue(event) {
 		const value = textInput.current?.value;
-		if (value?.length === 1 || event && "key" in event && match(event, Escape)) setInputValue("");
-		else setInputValue(value ?? "");
+		const isEscape = event && "key" in event && match(event, Escape);
+		const isClick = value && !(event && "key" in event);
+		if (value?.length === 1 || isEscape || isClick) {
+			setInputValue("");
+			onInputValueChange?.({
+				inputValue: "",
+				type: FunctionSetInputValue
+			});
+		} else setInputValue(value ?? "");
 		if (textInput.current) textInput.current.focus();
 	}
 	const candidate = slug ?? decorator;
 	const candidateIsAILabel = isComponentElement(candidate, AILabel);
 	const normalizedDecorator = candidateIsAILabel ? cloneElement(candidate, { size: "mini" }) : candidate;
 	const selectedItemsLength = controlledSelectedItems.filter((item) => !isSelectAllItem(item)).length;
-	const className = classNames(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
+	const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
 		[`${prefix}--multi-select--open`]: isOpen,
@@ -508,6 +517,9 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 								disabled,
 								translateWithId,
 								readOnly,
+								onMouseDown: (event) => {
+									event.preventDefault();
+								},
 								onMouseUp: (event) => {
 									event.stopPropagation();
 								}

package/es/components/MultiSelect/MultiSelect.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { ArrowDown, Delete, Enter, Escape, Space, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 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 { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
@@ -27,8 +27,8 @@ import { sortingPropTypes } from "./MultiSelectPropTypes.js";
 import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
-import classNames from "classnames";
 import React, { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -171,7 +171,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 	const inline = type === "inline";
 	const showWarning = normalizedProps.warn;
 	const showHelperText = !normalizedProps.warn && !normalizedProps.invalid && helperText;
-	const wrapperClasses = classNames(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--multi-select__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
@@ -180,14 +180,14 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		[`${prefix}--list-box__wrapper--slug`]: slug,
 		[`${prefix}--list-box__wrapper--decorator`]: decorator
 	});
-	const titleClasses = classNames(`${prefix}--label`, {
+	const titleClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
 	const helperId = !helperText ? void 0 : `multiselect-helper-text-${multiSelectInstanceId}`;
 	const fieldLabelId = `multiselect-field-label-${multiSelectInstanceId}`;
-	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const className = classNames(`${prefix}--multi-select`, {
+	const helperClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const className = cx(`${prefix}--multi-select`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
 		[`${prefix}--multi-select--warning`]: showWarning,
@@ -263,7 +263,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		}
 		return changes;
 	}
-	const multiSelectFieldWrapperClasses = classNames(`${prefix}--list-box__field--wrapper`, { [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused });
+	const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, { [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused });
 	const readOnlyEventHandlers = readOnly ? {
 		onClick: (evt) => {
 			evt.preventDefault();