@carbon/react 1.112.0-rc.0 → 1.112.0

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/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

@@ -23,6 +23,7 @@ import { jsx } from "react/jsx-runtime";
 */
 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",
@@ -39,10 +40,11 @@ const PROP_TO_FLAG = {
 * 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, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
+const FeatureFlags$1 = ({ children, flags, enableV12Release, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
 	const parentScope = useContext(FeatureFlagContext);
 	const scope = useMemo(() => {
 		const flagProps = {
+			enableV12Release,
 			enableV12TileDefaultIcons,
 			enableV12TileRadioIcons,
 			enableV12Overflowmenu,
@@ -64,6 +66,7 @@ const FeatureFlags$1 = ({ children, flags, enableV12TileDefaultIcons, enableV12T
 		scope.mergeWithScope(parentScope);
 		return scope;
 	}, [
+		enableV12Release,
 		enableV12TileDefaultIcons,
 		enableV12TileRadioIcons,
 		enableV12Overflowmenu,
@@ -88,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/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

@@ -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);
@@ -364,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;
@@ -508,6 +515,9 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 								disabled,
 								translateWithId,
 								readOnly,
+								onMouseDown: (event) => {
+									event.preventDefault();
+								},
 								onMouseUp: (event) => {
 									event.stopPropagation();
 								}

package/es/feature-flags.js

@@ -17,6 +17,7 @@ merge({
 	"enable-css-custom-properties": true,
 	"enable-css-grid": true,
 	"enable-v11-release": true,
+	"enable-v12-release": false,
 	"enable-experimental-tile-contrast": false,
 	"enable-tile-contrast": false,
 	"enable-v12-tile-radio-icons": false,

package/lib/components/DatePicker/DatePicker.js

@@ -286,10 +286,9 @@ const DatePicker = (0, react.forwardRef)((props, ref) => {
 					classFlatpickrCurrentMonth: "cur-month",
 					locale
 				}),
-				require_fixEventsPlugin.default({
+				require_fixEventsPlugin.fixEventsPlugin({
 					inputFrom: startInputField.current,
 					inputTo: endInputField.current,
-					lastStartValue,
 					container: wrapperRef.current
 				})
 			],

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

@@ -9,14 +9,13 @@ const require_keys = require("../../../internal/keyboard/keys.js");
 const require_match = require("../../../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
-exports.default = fixEventsPlugin;
+exports.fixEventsPlugin = fixEventsPlugin;

package/lib/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/lib/components/FeatureFlags/index.js

@@ -26,6 +26,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 */
 const FeatureFlagContext = (0, react.createContext)(_carbon_feature_flags.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",
@@ -42,10 +43,11 @@ const PROP_TO_FLAG = {
 * 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 = ({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
+const FeatureFlags = ({ children, flags, enableV12Release, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence }) => {
 	const parentScope = (0, react.useContext)(FeatureFlagContext);
 	const scope = (0, react.useMemo)(() => {
 		const flagProps = {
+			enableV12Release,
 			enableV12TileDefaultIcons,
 			enableV12TileRadioIcons,
 			enableV12Overflowmenu,
@@ -67,6 +69,7 @@ const FeatureFlags = ({ children, flags, enableV12TileDefaultIcons, enableV12Til
 		scope.mergeWithScope(parentScope);
 		return scope;
 	}, [
+		enableV12Release,
 		enableV12TileDefaultIcons,
 		enableV12TileRadioIcons,
 		enableV12Overflowmenu,
@@ -91,6 +94,7 @@ FeatureFlags.propTypes = {
 	* Provide the feature flags to enabled or disabled in the current Rea,ct tree
 	*/
 	flags: require_deprecate.deprecate(prop_types.default.objectOf(prop_types.default.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: prop_types.default.bool,
 	enableV12TileDefaultIcons: prop_types.default.bool,
 	enableV12TileRadioIcons: prop_types.default.bool,
 	enableV12Overflowmenu: prop_types.default.bool,

package/lib/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/lib/components/ListBox/next/ListBoxSelection.js

@@ -110,8 +110,13 @@ ListBoxSelection.propTypes = {
 	*/
 	onClick: prop_types.default.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: prop_types.default.func,
+	/**
+	* Specify an optional `onMouseUp` handler that is called when the underlying
+	* clear selection element fires a mouseup event
 	*/
 	onMouseUp: prop_types.default.func,
 	/**

package/lib/components/Modal/Modal.js

@@ -306,8 +306,8 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		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/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -50,7 +50,7 @@ react_fast_compare = require_runtime.__toESM(react_fast_compare);
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const { InputBlur, InputKeyDownEnter, ItemClick, MenuMouseLeave, InputKeyDownArrowUp, InputKeyDownArrowDown, ItemMouseMove, InputClick, ToggleButtonClick, FunctionToggleMenu, InputChange, InputKeyDownEscape, FunctionSetHighlightedIndex } = downshift.useCombobox.stateChangeTypes;
+const { InputBlur, InputKeyDownEnter, ItemClick, MenuMouseLeave, InputKeyDownArrowUp, InputKeyDownArrowDown, ItemMouseMove, InputClick, ToggleButtonClick, FunctionToggleMenu, InputChange, InputKeyDownEscape, FunctionSetHighlightedIndex, FunctionSetInputValue } = downshift.useCombobox.stateChangeTypes;
 const { SelectedItemKeyDownBackspace, SelectedItemKeyDownDelete, DropdownKeyDownBackspace, FunctionRemoveSelectedItem } = downshift.useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSelect({ autoAlign = false, className: containerClassName, clearSelectionDescription = "Total items selected: ", clearSelectionText = "To clear selection, press Delete or Backspace", compareItems = require_sorting.defaultCompareItems, decorator, direction = "bottom", disabled = false, downshiftProps, filterItems = require_filter.defaultFilterItems, helperText, hideLabel, id, initialSelectedItems = [], invalid = false, invalidText, items, itemToElement: ItemToElement, itemToString = require_defaultItemToString.defaultItemToString, light, locale = "en", onInputValueChange, open = false, onChange, onMenuChange, placeholder, readOnly, titleText, type, selectionFeedback = "top-after-reopen", selectedItems: selected, size, sortItems = require_sorting.defaultSortItems, translateWithId, useTitleInItem, warn = false, warnText, slug, inputProps }, ref) {
 	const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
@@ -370,8 +370,15 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 	});
 	function clearInputValue(event) {
 		const value = textInput.current?.value;
-		if (value?.length === 1 || event && "key" in event && require_match.match(event, require_keys.Escape)) setInputValue("");
-		else setInputValue(value ?? "");
+		const isEscape = event && "key" in event && require_match.match(event, require_keys.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;
@@ -514,6 +521,9 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 								disabled,
 								translateWithId,
 								readOnly,
+								onMouseDown: (event) => {
+									event.preventDefault();
+								},
 								onMouseUp: (event) => {
 									event.stopPropagation();
 								}

package/lib/feature-flags.js

@@ -16,6 +16,7 @@
 	"enable-css-custom-properties": true,
 	"enable-css-grid": true,
 	"enable-v11-release": true,
+	"enable-v12-release": false,
 	"enable-experimental-tile-contrast": false,
 	"enable-tile-contrast": false,
 	"enable-v12-tile-radio-icons": false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.112.0-rc.0",
+  "version": "1.112.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -38,10 +38,13 @@
   },
   "scripts": {
     "build": "yarn clean && node tasks/build-styles.js && node tasks/build.js",
-    "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
+    "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static storybook-static-v12 .storybook-v12/generated",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
-    "storybook": "storybook dev -p 3000",
+    "storybook": "storybook dev -p 3011",
     "storybook:build": "storybook build",
+    "storybook:v12": "yarn storybook:v12:prepare && storybook dev -p 3012 --config-dir .storybook-v12",
+    "storybook:v12:build": "yarn storybook:v12:prepare && storybook build --config-dir .storybook-v12 --output-dir storybook-static-v12",
+    "storybook:v12:prepare": "node ../../tasks/prepare-v12-storybook.mjs .",
     "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id fd89d12b-6a39-48b4-adf4-30c94dc0dddd --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)"
   },
   "peerDependencies": {
@@ -52,11 +55,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^1.4.0",
-    "@carbon/icons-react": "^11.84.0-rc.0",
-    "@carbon/layout": "^11.55.0-rc.0",
-    "@carbon/styles": "^1.111.0-rc.0",
-    "@carbon/utilities": "^0.22.0-rc.0",
+    "@carbon/feature-flags": "^1.5.0",
+    "@carbon/icons-react": "^11.84.0",
+    "@carbon/layout": "^11.55.0",
+    "@carbon/styles": "^1.111.0",
+    "@carbon/utilities": "^0.22.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,7 +82,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.77.0-rc.0",
+    "@carbon/themes": "^11.77.0",
     "@figma/code-connect": "^1.4.7",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
@@ -111,7 +114,7 @@
     "tinyclip": "^0.1.12",
     "tsdown": "^0.22.0",
     "typescript": "^6.0.3",
-    "typescript-config-carbon": "^0.11.0-rc.0",
+    "typescript-config-carbon": "^0.11.0",
     "use-sync-external-store": "^1.5.0",
     "vite": "^8.0.0"
   },
@@ -126,5 +129,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "1738a92e35dc0b9ba19877b9a4319bcc3336c5b1"
+  "gitHead": "5102bd860864c2580048183ffaf50d1ffd4400b5"
 }

package/telemetry.yml

@@ -174,6 +174,7 @@ collect:
         - onKeyUp
         - onLoadingSuccess
         - onMenuChange
+        - onMouseDown
         - onMouseEnter
         - onMouseLeave
         - onMouseUp
@@ -359,6 +360,7 @@ collect:
         - enableTreeviewControllable
         - enableV12DynamicFloatingStyles
         - enableV12Overflowmenu
+        - enableV12Release
         - enableV12TileDefaultIcons
         - enableV12TileRadioIcons
         - flags
@@ -475,7 +477,6 @@ collect:
         - closeMenu
         - handleOverflowMenuItemFocus
         - isDelete
-        - onMouseDown
         - requireTitle
         - wrapperClassName
         # PageHeaderBreadcrumbBar