@carbon/react 1.101.0-rc.0 → 1.102.0-rc.0

package/lib/components/DataTable/TableToolbarSearch.js

@@ -30,6 +30,13 @@ const defaultTranslations = {
 const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
 };
+
+/**
+ * @deprecated Passing `''` as the event sentinel is legacy compatibility
+ * behavior for `DataTable` filtering. In the next major release, this type
+ * should become an optional `ChangeEvent<HTMLInputElement>` instead.
+ */
+
 const TableToolbarSearch = ({
   className,
   searchContainerClass,
@@ -68,14 +75,14 @@ const TableToolbarSearch = ({
   }, [focusTarget]);
   React.useEffect(() => {
     if (defaultValue) {
+      // TODO: Remove the `''` event sentinel and pass `undefined` for
+      // value initialization in the next major release.
       onChangeProp?.('', defaultValue);
     }
   },
   //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  const searchClasses = cx(className, {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    [searchContainerClass]: searchContainerClass,
+  const searchClasses = cx(className, searchContainerClass, {
     [`${prefix}--toolbar-search-container-active`]: expanded,
     [`${prefix}--toolbar-search-container-disabled`]: disabled,
     [`${prefix}--toolbar-search-container-expandable`]: !persistent,

package/lib/components/DataTable/stories/examples/TableToolbarFilter.d.ts

@@ -12,6 +12,9 @@ interface TableToolbarFilterProps {
     className?: string;
     /**
      * Provide an optional hook that is called each time the input is updated
+     *
+     * Note: the `''` event sentinel exists for `DataTable` compatibility and
+     * should be removed in the next major release.
      */
     onChange?: (event: '' | ChangeEvent<HTMLInputElement>) => void;
     /**

package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,11 +22,6 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
      * Specify the number of columns that you want to render in the skeleton state
      */
     columnCount?: number;
-    /**
-     * Optionally specify whether you want the Skeleton to be rendered as a
-     * compact DataTable
-     */
-    compact?: boolean;
     /**
      * Optionally specify the displayed headers
      */
@@ -57,7 +52,7 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
     className?: string;
 }
 declare const DataTableSkeleton: {
-    ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ headers, rowCount, columnCount, zebra, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
@@ -67,11 +62,6 @@ declare const DataTableSkeleton: {
          * Specify the number of columns that you want to render in the skeleton state
          */
         columnCount: PropTypes.Requireable<number>;
-        /**
-         * Optionally specify whether you want the Skeleton to be rendered as a
-         * compact DataTable
-         */
-        compact: PropTypes.Requireable<boolean>;
         /**
          * Optionally specify the displayed headers
          */

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -21,7 +21,6 @@ const DataTableSkeleton = ({
   rowCount = 5,
   columnCount = 5,
   zebra = false,
-  compact = false,
   className,
   showHeader = true,
   showToolbar = true,
@@ -33,8 +32,7 @@ const DataTableSkeleton = ({
     [`${prefix}--skeleton`]: true,
     [`${prefix}--data-table`]: true,
     [`${prefix}--data-table--${size}`]: size,
-    [`${prefix}--data-table--zebra`]: zebra,
-    [`${prefix}--data-table--compact`]: compact
+    [`${prefix}--data-table--zebra`]: zebra
   });
   const rowRepeat = rowCount;
   const rows = Array(rowRepeat);
@@ -80,11 +78,6 @@ DataTableSkeleton.propTypes = {
    * Specify the number of columns that you want to render in the skeleton state
    */
   columnCount: PropTypes.number,
-  /**
-   * Optionally specify whether you want the Skeleton to be rendered as a
-   * compact DataTable
-   */
-  compact: PropTypes.bool,
   /**
    * Optionally specify the displayed headers
    */

package/lib/components/DatePicker/DatePicker.js

@@ -433,7 +433,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
           calendarContainer.classList.add('open');
           const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
           const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
-          (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+          const focusTarget = selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer;
+          if (focusTarget instanceof HTMLElement) {
+            focusTarget.focus();
+          }
           if (event.target === startInputField.current) {
             lastFocusedField.current = startInputField.current;
           } else if (event.target === endInputField.current) {

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -61,12 +61,9 @@ export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLInputEleme
      */
     onClick?: func;
     /**
-     * Provide a regular expression that the input value must match
-     * TODO:need to be rewritten
+     * Provide a regular expression pattern string that the input value must match
      */
-    pattern?: (props: {
-        [key: string]: any;
-    }, propName: string, componentName: string) => null | any | Error;
+    pattern?: string;
     /**
      * Specify the placeholder text
      */

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -208,20 +208,9 @@ DatePickerInput.propTypes = {
    */
   onClick: PropTypes.func,
   /**
-   * Provide a regular expression that the input value must match
+   * Provide a regular expression pattern string that the input value must match
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-  pattern: (props, propName, componentName) => {
-    if (props[propName] === undefined) {
-      return;
-    }
-    try {
-      new RegExp(props[propName]);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-    } catch (e) {
-      return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
-    }
-  },
+  pattern: PropTypes.string,
   /**
    * Specify the placeholder text
    */

package/lib/components/Dropdown/Dropdown.js

@@ -61,6 +61,7 @@ function stateReducer(state, actionAndChanges) {
   } = actionAndChanges;
   switch (type) {
     case ItemMouseMove:
+      return state;
     case MenuMouseLeave:
       if (changes.highlightedIndex === state.highlightedIndex) {
         // Prevent state update if highlightedIndex hasn't changed
@@ -264,7 +265,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     className: helperClasses
   }, helperText) : null;
   const handleFocus = evt => {
-    setIsFocused(evt.type === 'focus' && !selectedItem ? true : false);
+    setIsFocused(evt.type === 'focus' && !selectedItem);
   };
   const buttonRef = React.useRef(null);
   const mergedRef = mergeRefs.mergeRefs(toggleButtonProps.ref, ref, buttonRef);
@@ -353,10 +354,10 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     size: size,
     className: className,
     invalid: normalizedProps.invalid,
-    invalidText: isFluid ? invalidText : undefined,
+    invalidText: invalidText,
     invalidTextId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
-    warnText: isFluid ? warnText : undefined,
+    warnText: warnText,
     warnTextId: normalizedProps.warnId,
     light: light,
     isOpen: isOpen,
@@ -402,7 +403,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     }, itemProps), itemToElement ? itemToElement(item) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
-  }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
+  }))), !inline && !isFluid && !normalizedProps.validation && helper);
 });
 
 // Workaround problems with forwardRef() and generics.  In the long term, should stop using forwardRef().

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -19,6 +19,7 @@ var events = require('../../tools/events.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var utils = require('../Search/utils.js');
 
 const frFn = React.forwardRef;
 const ExpandableSearch = frFn((props, forwardedRef) => {
@@ -32,7 +33,7 @@ const ExpandableSearch = frFn((props, forwardedRef) => {
     ...rest
   } = props;
   const [expanded, setExpanded] = React.useState(isExpanded || false);
-  const [hasContent, setHasContent] = React.useState(defaultValue ? true : false);
+  const [hasContent, setHasContent] = React.useState(utils.isSearchValuePresent(defaultValue));
   const searchRef = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   function handleBlur(evt) {

package/lib/components/ExpandableSearch/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ExpandableSearch = require('./ExpandableSearch.js');
+
+
+
+exports.ExpandableSearch = ExpandableSearch.default;
+exports.default = ExpandableSearch.default;

package/lib/components/FeatureFlags/index.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var FeatureFlags$1 = require('@carbon/feature-flags');
+var featureFlags = require('@carbon/feature-flags');
 var PropTypes = require('prop-types');
 var React = require('react');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -17,7 +17,7 @@ var deprecate = require('../../prop-types/deprecate.js');
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
  */
-const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
+const FeatureFlagContext = /*#__PURE__*/React.createContext(featureFlags.FeatureFlags);
 
 /**
  * Supports an object of feature flag values with the `flags` prop, merging them
@@ -54,12 +54,12 @@ function FeatureFlags({
     ...flags
   };
   const [scope, updateScope] = React.useState(() => {
-    const scope = FeatureFlags$1.createScope(combinedFlags);
+    const scope = featureFlags.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
   });
   if (parentScope !== prevParentScope) {
-    const scope = FeatureFlags$1.createScope(combinedFlags);
+    const scope = featureFlags.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
     setPrevParentScope(parentScope);
@@ -69,7 +69,7 @@ function FeatureFlags({
   // for flags that are passed in. If they have changed, then we re-create the
   // FeatureFlagScope using the new flags
   useChangedValue(combinedFlags, isEqual, changedFlags => {
-    const scope = FeatureFlags$1.createScope(changedFlags);
+    const scope = featureFlags.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
   });

package/lib/components/FluidSelect/FluidSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export interface FluidSelectProps {
     /**
      * Provide the contents of your Select
@@ -17,7 +17,7 @@ export interface FluidSelectProps {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/lib/components/FluidTextArea/FluidTextArea.d.ts

@@ -8,8 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 export interface FluidTextAreaProps {
     /**
-     * Provide a custom className that is applied directly to the underlying
-     * `<textarea>` node
+     * Provide a custom className that is applied to the wrapper node
      */
     className?: string;
     /**
@@ -101,8 +100,7 @@ declare const FluidTextArea: {
     ({ className, ...other }: FluidTextAreaProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
-         * Provide a custom className that is applied directly to the underlying
-         * `<textarea>` node
+         * Provide a custom className that is applied to the wrapper node
          */
         className: PropTypes.Requireable<string>;
         /**

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -35,8 +35,7 @@ const FluidTextArea = ({
 };
 FluidTextArea.propTypes = {
   /**
-   * Provide a custom className that is applied directly to the underlying
-   * `<textarea>` node
+   * Provide a custom className that is applied to the wrapper node
    */
   className: PropTypes.string,
   /**

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

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export interface FluidTimePickerSelectProps {
     /**
      * Provide the contents of your Select
@@ -17,7 +17,7 @@ export interface FluidTimePickerSelectProps {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Grid/Column.js

@@ -10,32 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var FeatureFlags = require('@carbon/feature-flags');
+var featureFlags = require('@carbon/feature-flags');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var GridContext = require('./GridContext.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespaceDefault(FeatureFlags);
-
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const Column = /*#__PURE__*/React.forwardRef(({
   as,
@@ -75,7 +56,7 @@ const Column = /*#__PURE__*/React.forwardRef(({
   }, rest), children);
 });
 const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
-const spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
+const spanPropType = featureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
   span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
   offset: PropTypes.number,
   start: PropTypes.number,

package/lib/components/ListBox/test-helpers.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import '@testing-library/jest-dom/jest-globals';
+export declare const findListBoxNode: () => Element | null;
+export declare const findMenuNode: () => Element | null;
+export declare const findMenuItemNode: (index: number) => Element;
+export declare const findMenuIconNode: () => Element | null;
+export declare const findFieldNode: () => Element | null;
+export declare const findComboboxNode: () => Element | null;
+export declare const findPopupNode: () => Element | null;
+export declare const openMenu: () => Promise<void>;
+export declare const assertMenuOpen: (mockProps: {
+    items: unknown[];
+}) => void;
+export declare const assertMenuClosed: () => void;
+/**
+ * 'GenericItem' corresponds to an item in a collection that is passed to
+ * `MultiSelect` that is in a predictable shape and works with the default
+ * `itemToString` function.
+ */
+export declare const generateGenericItem: (index: number) => {
+    id: string;
+    label: string;
+    value: number;
+};
+/**
+ * 'CustomItem' corresponds to a potentially different item structure that might
+ * be passed into `MultiSelect` that we would need to supply a custom
+ * `itemToString` method for.
+ */
+export declare const generateCustomItem: (index: number) => {
+    field: string;
+    value: string;
+};
+/**
+ * Generates an array of values generated by the `generator` function.
+ */
+export declare const generateItems: <T>(amount: number, generator: (index: number) => T) => T[];
+export declare const customItemToString: ({ field, }: {
+    field: string;
+    value: string;
+}) => string;
+/**
+ * This object contains two sets of three items that share the same root
+ * word in different portions of the string (beginning, middle, end):
+ *
+ *  - 'struct'
+ *  - 'port'
+ *
+ * Separated by a disabled item, these derivative words are helpful when
+ * testing fuzzy search functions and components that do substring filtering.
+ */
+export declare const cognateItems: ({
+    id: string;
+    text: string;
+    disabled?: undefined;
+} | {
+    id: string;
+    text: string;
+    disabled: boolean;
+})[];
+/**
+ * Flushes microtasks to ensure element position state is settled
+ * From https://floating-ui.com/docs/react#testing
+ * More context here: https://github.com/floating-ui/react-popper/issues/368#issuecomment-1340413010
+ */
+export declare const waitForPosition: () => Promise<void>;

package/lib/components/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Loading/Loading.js

@@ -40,7 +40,9 @@ function Loading({
     className: loadingClassName
   }), /*#__PURE__*/React.createElement("svg", {
     className: `${prefix}--loading__svg`,
-    viewBox: "0 0 100 100"
+    viewBox: "0 0 100 100",
+    role: "img",
+    "aria-label": description
   }, /*#__PURE__*/React.createElement("title", null, description), small ? /*#__PURE__*/React.createElement("circle", {
     className: `${prefix}--loading__background`,
     cx: "50%",

package/lib/components/Menu/Menu.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2025
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Menu/Menu.js

@@ -86,10 +86,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   }
   function handleOpen() {
     if (menu.current) {
-      focusReturn.current = document.activeElement;
+      const {
+        activeElement,
+        dir
+      } = document;
+      focusReturn.current = activeElement instanceof HTMLElement ? activeElement : null;
       if (legacyAutoalign) {
         const pos = calculatePosition();
-        if ((document?.dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
+        if ((dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
           menu.current.style.insetInlineStart = `initial`;
           menu.current.style.insetInlineEnd = `${pos[0]}px`;
         } else {

package/lib/components/Menu/MenuItem.js

@@ -71,7 +71,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   const context = React.useContext(MenuContext.MenuContext);
   const menuItem = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem, refs.setReference]);
-  const hasChildren = Boolean(children);
+  const hasChildren = React.Children.toArray(children).length > 0;
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -79,7 +79,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
       type: 'registerItem',
       payload: {
         ref: menuItem,
-        disabled: Boolean(disabled)
+        disabled: disabled ?? false
       }
     });
   }

package/lib/components/Modal/Modal.js

@@ -162,7 +162,6 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     const {
       target
     } = evt;
-    evt.stopPropagation();
     const shouldCloseOnOutsideClick =
     // Passive modals can close on clicks outside the modal when
     // preventCloseOnClickOutside is undefined or explicitly set to false.

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -222,7 +222,6 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     item => !item.disabled);
 
     // Sort only non-select-all items, select-all item must stay at the top
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
     const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
@@ -315,6 +314,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   React.useEffect(() => {
     const handleClickOutside = event => {
       const target = event.target;
+      if (!(target instanceof Node)) return;
       const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
 
       // If click is outside our component and menu is open or input is focused
@@ -616,15 +616,16 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
+    ref: autoAlign ? refs.setFloating : null,
+    hidden: !isOpen
   }, {
     suppressRefError: true
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+  }), [autoAlign, getMenuProps, isOpen, refs.setFloating]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);
     } else {
-      setIsFocused(evt?.type === 'focus' ? true : false);
+      setIsFocused(evt?.type === 'focus');
     }
   };
   const mergedRef = mergeRefs.mergeRefs(textInput, inputProp.ref);

package/lib/components/MultiSelect/MultiSelect.js

@@ -392,7 +392,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     if (evt.target.classList.contains(`${prefix}--tag__close-icon`)) {
       setIsFocused(false);
     } else {
-      setIsFocused(evt.type === 'focus' ? true : false);
+      setIsFocused(evt.type === 'focus');
     }
   };
   const readOnlyEventHandlers = readOnly ? {
@@ -426,8 +426,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: enableFloatingStyles ? refs.setFloating : null
-  }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null,
+    hidden: !isOpen
+  }), [enableFloatingStyles, getMenuProps, isOpen, refs.setFloating]);
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -474,9 +475,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, selectedItems.length > 0 && /*#__PURE__*/React.createElement(index$2.default.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
-    selectionCount: selectedItemsLength
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
@@ -495,9 +494,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     translateWithId: translateWithId
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen &&
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
-  sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,