@carbon/react 1.111.1 → 1.112.0

package/es/components/ComboBox/ComboBox.js

@@ -12,6 +12,7 @@ import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -39,7 +40,6 @@ import isEqual from "react-fast-compare";
 */
 const { InputBlur, InputKeyDownEnter, FunctionToggleMenu, ToggleButtonClick, ItemMouseMove, InputKeyDownArrowUp, InputKeyDownArrowDown, MenuMouseLeave, ItemClick, FunctionSelectItem } = useCombobox.stateChangeTypes;
 const defaultShouldFilterItem = () => true;
-const isDisabledItem = (item) => item !== null && typeof item === "object" && "disabled" in item && Boolean(item.disabled);
 const autocompleteCustomFilter = ({ item, inputValue }) => {
 	if (inputValue === null || inputValue === "") return true;
 	const lowercaseItem = item.toLowerCase();
@@ -56,7 +56,7 @@ const findHighlightedIndex = ({ items, itemToString = defaultItemToString }, inp
 	const searchValue = inputValue.toLowerCase();
 	for (let i = 0; i < items.length; i++) {
 		const item = itemToString(items[i]).toLowerCase();
-		if (!isDisabledItem(items[i]) && item.indexOf(searchValue) !== -1) return i;
+		if (!isItemDisabled(items[i]) && item.indexOf(searchValue) !== -1) return i;
 	}
 	return -1;
 };
@@ -99,7 +99,7 @@ const ComboBox = forwardRef((props, ref) => {
 	useEffect(() => {
 		if (typeahead) {
 			if (inputValue.length >= prevInputLengthRef.current) if (inputValue) {
-				const filteredItems = items.filter((item) => !isDisabledItem(item) && autocompleteCustomFilter({
+				const filteredItems = items.filter((item) => !isItemDisabled(item) && autocompleteCustomFilter({
 					item: itemToString(item),
 					inputValue
 				}));
@@ -221,7 +221,7 @@ const ComboBox = forwardRef((props, ref) => {
 			case InputKeyDownEnter:
 				if (!allowCustomValue) if (state.highlightedIndex !== -1) {
 					const highlightedItem = filterItems(items, itemToString, inputValue)[state.highlightedIndex];
-					if (highlightedItem && !isDisabledItem(highlightedItem)) return {
+					if (highlightedItem && !isItemDisabled(highlightedItem)) return {
 						...changes,
 						selectedItem: highlightedItem,
 						inputValue: itemToString(highlightedItem)
@@ -230,7 +230,7 @@ const ComboBox = forwardRef((props, ref) => {
 					const autoIndex = indexToHighlight(inputValue);
 					if (autoIndex !== -1) {
 						const matchingItem = items[autoIndex];
-						if (matchingItem && !isDisabledItem(matchingItem)) return {
+						if (matchingItem && !isItemDisabled(matchingItem)) return {
 							...changes,
 							selectedItem: matchingItem,
 							inputValue: itemToString(matchingItem)
@@ -352,7 +352,7 @@ const ComboBox = forwardRef((props, ref) => {
 		initialSelectedItem,
 		inputId: id,
 		stateReducer,
-		isItemDisabled: isDisabledItem,
+		isItemDisabled,
 		...downshiftProps,
 		onStateChange: ({ type, selectedItem: newSelectedItem }) => {
 			if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
@@ -539,7 +539,7 @@ const ComboBox = forwardRef((props, ref) => {
 										}
 										if (typeahead && event.key === "Tab") {
 											if (!isOpen) return;
-											const matchingItem = items.find((item) => !isDisabledItem(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
+											const matchingItem = items.find((item) => !isItemDisabled(item) && itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
 											if (matchingItem) {
 												downshiftSetInputValue(itemToString(matchingItem));
 												selectItem(matchingItem);

package/es/components/DatePicker/DatePicker.js

@@ -12,7 +12,7 @@ import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import DatePickerInput_default from "../DatePickerInput/index.js";
 import { appendToPlugin } from "./plugins/appendToPlugin.js";
-import fixEventsPlugin 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";
@@ -283,7 +283,6 @@ const DatePicker = forwardRef((props, ref) => {
 				fixEventsPlugin({
 					inputFrom: startInputField.current,
 					inputTo: endInputField.current,
-					lastStartValue,
 					container: wrapperRef.current
 				})
 			],

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

@@ -8,11 +8,8 @@ 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;
+export declare const fixEventsPlugin: FixEventsPlugin;
+export {};

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

@@ -9,14 +9,13 @@ import { ArrowDown, Enter } from "../../../internal/keyboard/keys.js";
 import { match } from "../../../internal/keyboard/match.js";
 //#region src/components/DatePicker/plugins/fixEventsPlugin.ts
 const fixEventsPlugin = (config) => (fp) => {
-	const { inputFrom, inputTo, lastStartValue, container } = config;
+	const { inputFrom, inputTo, container } = config;
 	let mouseDownInside = false;
-	const getEventPath = (event) => typeof event.composedPath === "function" ? event.composedPath() : [];
 	const isEventInside = (event) => {
-		const path = getEventPath(event);
+		const path = event.composedPath();
 		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)));
+		return Boolean(container && (path.includes(container) || container.contains(target)) || 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
@@ -62,6 +61,7 @@ const fixEventsPlugin = (config) => (fp) => {
 		}
 	};
 	const parseDateWithFormat = (dateStr) => fp.parseDate(dateStr, fp.config.dateFormat);
+	const isValidDate = (date) => date?.toString() !== "Invalid Date";
 	/**
 	* Handles `blur` event.
 	*
@@ -78,16 +78,9 @@ const fixEventsPlugin = (config) => (fp) => {
 			const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 			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) {
 			if (isValidDate(parseDateWithFormat(inputTo.value))) fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
 		}
-		if (inputTo === target && !inputFrom.value && lastStartValue.current) {
-			if (isValidDate(parseDateWithFormat(lastStartValue.current))) {
-				inputFrom.value = lastStartValue.current;
-				if (inputTo.value) fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
-			}
-		}
 	};
 	/**
 	* Releases event listeners used in this Flatpickr plugin.
@@ -128,4 +121,4 @@ const fixEventsPlugin = (config) => (fp) => {
 	};
 };
 //#endregion
-export { fixEventsPlugin as default };
+export { fixEventsPlugin };

package/es/components/Dropdown/Dropdown.js

@@ -8,6 +8,7 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -99,9 +100,6 @@ const Dropdown = React.forwardRef(({ autoAlign = false, className: containerClas
 	const onSelectedItemChange = useCallback(({ selectedItem }) => {
 		if (onChange) onChange({ selectedItem: selectedItem ?? null });
 	}, [onChange]);
-	const isItemDisabled = useCallback((item) => {
-		return item !== null && typeof item === "object" && "disabled" in item && item.disabled === true;
-	}, []);
 	const onHighlightedIndexChange = useCallback((changes) => {
 		const { highlightedIndex } = changes;
 		if (highlightedIndex !== void 0 && highlightedIndex > -1) {
@@ -128,7 +126,6 @@ const Dropdown = React.forwardRef(({ autoAlign = false, className: containerClas
 		initialSelectedItem,
 		onSelectedItemChange,
 		stateReducer,
-		isItemDisabled,
 		onHighlightedIndexChange,
 		downshiftProps
 	]);

package/es/components/FeatureFlags/index.d.ts

@@ -9,6 +9,7 @@ import { type ReactNode } from 'react';
 export interface FeatureFlagsProps {
     children?: ReactNode;
     flags?: Record<string, boolean>;
+    enableV12Release?: boolean;
     enableV12TileDefaultIcons?: boolean;
     enableV12TileRadioIcons?: boolean;
     enableV12Overflowmenu?: boolean;
@@ -26,13 +27,14 @@ export interface FeatureFlagsProps {
  * a feature flag is enabled or disabled in a given React tree
  */
 export declare const FeatureFlags: {
-    ({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, flags, enableV12Release, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide the feature flags to enabled or disabled in the current Rea,ct tree
          */
         flags: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        enableV12Release: PropTypes.Requireable<boolean>;
         enableV12TileDefaultIcons: PropTypes.Requireable<boolean>;
         enableV12TileRadioIcons: PropTypes.Requireable<boolean>;
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;

package/es/components/FeatureFlags/index.js

@@ -22,30 +22,51 @@ import { jsx } from "react/jsx-runtime";
 * or disable feature flags in a given React tree
 */
 const FeatureFlagContext = createContext(FeatureFlags);
+const PROP_TO_FLAG = {
+	enableV12Release: "enable-v12-release",
+	enableV12TileDefaultIcons: "enable-v12-tile-default-icons",
+	enableV12TileRadioIcons: "enable-v12-tile-radio-icons",
+	enableV12Overflowmenu: "enable-v12-overflowmenu",
+	enableTreeviewControllable: "enable-treeview-controllable",
+	enableExperimentalFocusWrapWithoutSentinels: "enable-experimental-focus-wrap-without-sentinels",
+	enableFocusWrapWithoutSentinels: "enable-focus-wrap-without-sentinels",
+	enableDialogElement: "enable-dialog-element",
+	enableV12DynamicFloatingStyles: "enable-v12-dynamic-floating-styles",
+	enableEnhancedFileUploader: "enable-enhanced-file-uploader",
+	enablePresence: "enable-presence"
+};
 /**
 * Supports an object of feature flag values with the `flags` prop, merging them
 * along with the current `FeatureFlagContext` to provide consumers to check if
 * a feature flag is enabled or disabled in a given React tree
 */
-const FeatureFlags$1 = ({ children, flags = {}, enableV12TileDefaultIcons = false, enableV12TileRadioIcons = false, enableV12Overflowmenu = false, enableTreeviewControllable = false, enableExperimentalFocusWrapWithoutSentinels = false, enableFocusWrapWithoutSentinels = false, enableDialogElement = false, enableV12DynamicFloatingStyles = false, enableEnhancedFileUploader = false, enablePresence = false }) => {
+const FeatureFlags$1 = ({ children, flags, enableV12Release, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
 	const parentScope = useContext(FeatureFlagContext);
 	const scope = useMemo(() => {
-		const scope = createScope({
-			"enable-v12-tile-default-icons": enableV12TileDefaultIcons,
-			"enable-v12-tile-radio-icons": enableV12TileRadioIcons,
-			"enable-v12-overflowmenu": enableV12Overflowmenu,
-			"enable-treeview-controllable": enableTreeviewControllable,
-			"enable-experimental-focus-wrap-without-sentinels": enableExperimentalFocusWrapWithoutSentinels,
-			"enable-focus-wrap-without-sentinels": enableFocusWrapWithoutSentinels,
-			"enable-dialog-element": enableDialogElement,
-			"enable-v12-dynamic-floating-styles": enableV12DynamicFloatingStyles,
-			"enable-enhanced-file-uploader": enableEnhancedFileUploader,
-			"enable-presence": enablePresence,
-			...flags
-		});
+		const flagProps = {
+			enableV12Release,
+			enableV12TileDefaultIcons,
+			enableV12TileRadioIcons,
+			enableV12Overflowmenu,
+			enableTreeviewControllable,
+			enableExperimentalFocusWrapWithoutSentinels,
+			enableFocusWrapWithoutSentinels,
+			enableDialogElement,
+			enableV12DynamicFloatingStyles,
+			enableEnhancedFileUploader,
+			enablePresence
+		};
+		const explicitFlags = {};
+		for (const [prop, flagKey] of Object.entries(PROP_TO_FLAG)) {
+			const value = flagProps[prop];
+			if (value !== void 0) explicitFlags[flagKey] = value;
+		}
+		if (flags) Object.assign(explicitFlags, flags);
+		const scope = createScope(explicitFlags);
 		scope.mergeWithScope(parentScope);
 		return scope;
 	}, [
+		enableV12Release,
 		enableV12TileDefaultIcons,
 		enableV12TileRadioIcons,
 		enableV12Overflowmenu,
@@ -70,6 +91,7 @@ FeatureFlags$1.propTypes = {
 	* Provide the feature flags to enabled or disabled in the current Rea,ct tree
 	*/
 	flags: deprecate(PropTypes.objectOf(PropTypes.bool), "The `flags` prop for `FeatureFlag` has been deprecated. Please run the `featureflag-deprecate-flags-prop` codemod to migrate to individual boolean props.npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write"),
+	enableV12Release: PropTypes.bool,
 	enableV12TileDefaultIcons: PropTypes.bool,
 	enableV12TileRadioIcons: PropTypes.bool,
 	enableV12Overflowmenu: PropTypes.bool,

package/es/components/IconIndicator/index.d.ts

@@ -5,13 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-export declare const IconIndicatorKinds: string[];
+import { PopoverAlignment } from '../Popover';
+declare const iconTypes: {
+    readonly failed: import("@carbon/icons-react").CarbonIconType;
+    readonly 'caution-major': import("@carbon/icons-react").CarbonIconType;
+    readonly 'caution-minor': import("@carbon/icons-react").CarbonIconType;
+    readonly undefined: import("@carbon/icons-react").CarbonIconType;
+    readonly succeeded: import("@carbon/icons-react").CarbonIconType;
+    readonly normal: import("@carbon/icons-react").CarbonIconType;
+    readonly 'in-progress': import("@carbon/icons-react").CarbonIconType;
+    readonly incomplete: import("@carbon/icons-react").CarbonIconType;
+    readonly 'not-started': import("@carbon/icons-react").CarbonIconType;
+    readonly pending: import("@carbon/icons-react").CarbonIconType;
+    readonly unknown: import("@carbon/icons-react").CarbonIconType;
+    readonly informative: import("@carbon/icons-react").CarbonIconType;
+};
+export declare const IconIndicatorKinds: (keyof typeof iconTypes)[];
 export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
 export interface IconIndicatorProps {
+    /**
+     * Specify how the tooltip should align with the icon in compact mode
+     */
+    align?: PopoverAlignment;
+    /**
+     * Will auto-align the tooltip in compact mode.
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * When true, displays only the icon with the label in a tooltip
+     */
+    compact?: boolean;
+    /**
+     * Description for the icon announced to screen readers in compact mode.
+     * Defaults to `label` when not provided.
+     */
+    iconDescription?: string;
     /**
      * Specify the kind of icon to be used
      */

package/es/components/IconIndicator/index.js

@@ -6,10 +6,11 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import classNames from "classnames";
 import React from "react";
 import PropTypes from "prop-types";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, CheckmarkOutline, CircleDash, ErrorFilled, InProgress, Incomplete, PendingFilled, UndefinedFilled, UnknownFilled, WarningAltFilled, WarningAltInvertedFilled, WarningSquareFilled } from "@carbon/icons-react";
 //#region src/components/IconIndicator/index.tsx
 /**
@@ -18,54 +19,82 @@ import { CheckmarkFilled, CheckmarkOutline, CircleDash, ErrorFilled, InProgress,
 * 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 IconIndicatorKinds = [
-	"failed",
-	"caution-major",
-	"caution-minor",
-	"undefined",
-	"succeeded",
-	"normal",
-	"in-progress",
-	"incomplete",
-	"not-started",
-	"pending",
-	"unknown",
-	"informative"
-];
 const iconTypes = {
 	failed: ErrorFilled,
-	["caution-major"]: WarningAltInvertedFilled,
-	["caution-minor"]: WarningAltFilled,
+	"caution-major": WarningAltInvertedFilled,
+	"caution-minor": WarningAltFilled,
 	undefined: UndefinedFilled,
 	succeeded: CheckmarkFilled,
 	normal: CheckmarkOutline,
-	["in-progress"]: InProgress,
+	"in-progress": InProgress,
 	incomplete: Incomplete,
-	["not-started"]: CircleDash,
+	"not-started": CircleDash,
 	pending: PendingFilled,
 	unknown: UnknownFilled,
 	informative: WarningSquareFilled
 };
-const IconIndicator = React.forwardRef(({ className: customClassName, kind, label, size = 16 }, ref) => {
+const IconIndicatorKinds = Object.keys(iconTypes);
+const IconIndicator = React.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, iconDescription, kind, label, size = 16 }, ref) => {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size == 20 });
+	const classNames$1 = classNames(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size === 20 });
 	const IconForKind = iconTypes[kind];
 	if (!IconForKind) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	const iconElement = /* @__PURE__ */ jsx(IconForKind, {
+		size,
+		className: `${prefix}--icon-indicator--${kind}`
+	});
+	return /* @__PURE__ */ jsx("div", {
 		className: classNames$1,
 		ref,
-		children: [/* @__PURE__ */ jsx(IconForKind, {
-			size,
-			className: `${prefix}--icon-indicator--${kind}`
-		}), label]
+		children: compact ? /* @__PURE__ */ jsxs(DefinitionTooltip, {
+			align,
+			autoAlign,
+			openOnHover: true,
+			definition: label,
+			triggerClassName: `${prefix}--icon-indicator__button`,
+			children: [iconElement, /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--visually-hidden`,
+				children: iconDescription ?? label
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [iconElement, label] })
 	});
 });
 IconIndicator.propTypes = {
+	/**
+	* Specify how the tooltip should align with the icon in compact mode
+	*/
+	align: PropTypes.oneOf([
+		"top",
+		"top-start",
+		"top-end",
+		"bottom",
+		"bottom-start",
+		"bottom-end",
+		"left",
+		"left-start",
+		"left-end",
+		"right",
+		"right-start",
+		"right-end"
+	]),
+	/**
+	* Will auto-align the tooltip in compact mode
+	*/
+	autoAlign: PropTypes.bool,
 	/**
 	* Specify an optional className to add.
 	*/
 	className: PropTypes.string,
 	/**
+	* When true, displays only the icon with the label in a tooltip
+	*/
+	compact: PropTypes.bool,
+	/**
+	* Description for the icon announced to screen readers in compact mode.
+	* Defaults to `label` when not provided.
+	*/
+	iconDescription: PropTypes.string,
+	/**
 	* Specify the kind of the Icon Indicator
 	*/
 	kind: PropTypes.oneOf(IconIndicatorKinds).isRequired,

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

@@ -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/Modal/Modal.js

@@ -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,

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -12,6 +12,7 @@ import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
+import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -43,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);
@@ -72,7 +73,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		filteredItems
 	});
 	const selectAllStatus = useMemo(() => {
-		const selectable = nonSelectAllItems.filter((item) => !item.disabled);
+		const selectable = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const nonSelectedCount = selectable.filter((item) => !controlledSelectedItems.some((sel) => isEqual(sel, item))).length;
 		const totalCount = selectable.length;
 		return {
@@ -81,7 +82,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		};
 	}, [controlledSelectedItems, nonSelectAllItems]);
 	const handleSelectAllClick = useCallback(() => {
-		const selectable = nonSelectAllItems.filter((i) => !i.disabled);
+		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 {
@@ -131,7 +132,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	}, [open]);
 	const sortedItems = useMemo(() => {
 		const selectAllItem = items.find(isSelectAllItem);
-		const selectableRealItems = nonSelectAllItems.filter((item) => !item.disabled);
+		const selectableRealItems = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const sortedReal = sortItems(nonSelectAllItems, {
 			selectedItems: {
 				top: controlledSelectedItems,
@@ -255,9 +256,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		inputId,
 		inputValue,
 		stateReducer,
-		isItemDisabled(item) {
-			return item?.disabled;
-		}
+		isItemDisabled
 	});
 	function stateReducer(state, actionAndChanges) {
 		const { type, props, changes } = actionAndChanges;
@@ -266,7 +265,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		switch (type) {
 			case InputKeyDownEnter:
 				if (sortedItems.length === 0) return changes;
-				if (changes.selectedItem && changes.selectedItem.disabled !== true) if (isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
+				if (changes.selectedItem && !isItemDisabled(changes.selectedItem)) if (isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return {
@@ -365,8 +364,15 @@ 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;
@@ -509,6 +515,9 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 								disabled,
 								translateWithId,
 								readOnly,
+								onMouseDown: (event) => {
+									event.preventDefault();
+								},
 								onMouseUp: (event) => {
 									event.stopPropagation();
 								}

package/es/components/MultiSelect/MultiSelect.js

@@ -13,6 +13,7 @@ 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";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
@@ -114,9 +115,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		},
 		selectedItem: controlledSelectedItems,
 		items: filteredItems,
-		isItemDisabled(item) {
-			return item?.disabled;
-		},
+		isItemDisabled,
 		...downshiftProps
 	});
 	const toggleButtonProps = getToggleButtonProps({
@@ -298,7 +297,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		return {
 			hasIndividualSelections: selectedItems.some((selected) => !isSelectAllItem(selected)),
 			nonSelectAllSelectedCount: selectedItems.filter((selected) => !isSelectAllItem(selected)).length,
-			totalSelectableCount: filteredItems.filter((item) => !isSelectAllItem(item) && !item.disabled).length
+			totalSelectableCount: filteredItems.filter((item) => !isSelectAllItem(item) && !isItemDisabled(item)).length
 		};
 	}, [selectedItems, filteredItems]);
 	return /* @__PURE__ */ jsxs("div", {