@carbon/react 1.62.1 → 1.63.0

package/lib/components/DataTable/TableSelectRow.js

@@ -38,9 +38,10 @@ const TableSelectRow = _ref => {
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const uniqueNameId = React.useId();
   const selectionInputProps = {
     id,
-    name,
+    name: name ? name : uniqueNameId,
     onClick: onSelect,
     onChange,
     checked,

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

@@ -7,11 +7,14 @@
 import PropTypes from 'prop-types';
 import { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import { SearchProps } from '../Search';
-import { InternationalProps } from '../../types/common';
+import { TranslateWithId } from '../../types/common';
+/**
+ * Message ids that will be passed to translateWithId().
+ */
 export type TableToolbarTranslationKey = 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder';
 type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
-export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, InternationalProps<TableToolbarTranslationKey> {
+export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TableToolbarTranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
      */

package/lib/components/DataTable/TableToolbarSearch.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
-var instanceId = require('./tools/instanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 
@@ -25,7 +25,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getInstanceId = instanceId["default"]();
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
@@ -61,7 +64,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = React.useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = React.useState(defaultValue || '');
-  const uniqueId = React.useMemo(getInstanceId, []);
+  const uniqueId = useId.useId();
   const [focusTarget, setFocusTarget] = React.useState(null);
   const prefix = usePrefix.usePrefix();
   React.useEffect(() => {

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -16,7 +16,7 @@ var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 require('../Text/index.js');
 var Text = require('../Text/Text.js');
 
@@ -26,7 +26,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
@@ -52,7 +51,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const datePickerInputInstanceId = getInstanceId();
+  const datePickerInputInstanceId = useId.useId();
   const datePickerInputProps = {
     id,
     onChange: event => {

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

@@ -7,12 +7,12 @@
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
 import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
-import { ReactAttr } from '../../types/common';
+import { TranslateWithId, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -123,10 +123,6 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * visiting this control
      */
     titleText?: ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
     /**
      * The dropdown type, `default` or `inline`
      */

package/lib/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -31,7 +31,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const {
   ToggleButtonKeyDownArrowDown,
   ToggleButtonKeyDownArrowUp,
@@ -135,9 +134,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       return isObject && 'disabled' in item && item.disabled === true;
     }
   };
-  const {
-    current: dropdownInstanceId
-  } = React.useRef(getInstanceId());
+  const dropdownInstanceId = useId.useId();
   function stateReducer(state, actionAndChanges) {
     const {
       changes,

package/lib/components/FluidSearch/FluidSearch.Skeleton.js

@@ -0,0 +1,50 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+function FluidSearchSkeleton(_ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"](`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-input`
+  })));
+}
+FluidSearchSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = FluidSearchSkeleton;

package/lib/components/FluidSearch/FluidSearch.js

@@ -0,0 +1,106 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const FluidSearch = /*#__PURE__*/React__default["default"].forwardRef(function FluidSearch(_ref, ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--search--fluid`, className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidSearch.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes__default["default"].string,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes__default["default"].string,
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes__default["default"].string,
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes__default["default"].func,
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes__default["default"].func,
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes__default["default"].func,
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes__default["default"].string,
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes__default["default"].string,
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+var FluidSearch$1 = FluidSearch;
+
+exports["default"] = FluidSearch$1;

package/lib/components/FormGroup/FormGroup.d.ts

@@ -16,6 +16,10 @@ export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
      * Provide a custom className to be applied to the containing <fieldset> node
      */
     className?: string;
+    /**
+     * Specify whether the FormGroup should be disabled
+     */
+    disabled?: boolean;
     /**
      * Specify whether the <FormGroup> is invalid
      */
@@ -39,7 +43,7 @@ export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
     messageText?: string;
 }
 declare const FormGroup: {
-    ({ legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ disabled, legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide the children form elements to be rendered inside of the <fieldset>
@@ -49,6 +53,10 @@ declare const FormGroup: {
          * Provide a custom className to be applied to the containing <fieldset> node
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the FormGroup should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
         /**
          * Specify whether the <FormGroup> is invalid
          */

package/lib/components/FormGroup/FormGroup.js

@@ -23,6 +23,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const FormGroup = _ref => {
   let {
+    disabled = false,
     legendId,
     legendText,
     invalid = false,
@@ -34,7 +35,9 @@ const FormGroup = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const classNamesFieldset = cx__default["default"](`${prefix}--fieldset`, className);
-  return /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({}, invalid && {
+  return /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
+    disabled: disabled
+  }, invalid && {
     'data-invalid': ''
   }, {
     className: classNamesFieldset
@@ -56,6 +59,10 @@ FormGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * Specify whether the FormGroup should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
   /**
    * Specify whether the <FormGroup> is invalid
    */

package/lib/components/ListBox/ListBoxMenuIcon.d.ts

@@ -5,19 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { TranslateWithId } from '../../types/common';
 export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu';
-export interface ListBoxMenuIconProps {
+export interface ListBoxMenuIconProps extends TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify whether the menu is currently open, which will influence the
      * direction of the menu icon
      */
     isOpen: boolean;
-    /**
-     * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in a ListBoxMenuIconTranslationKey and should
-     * return a string message for that given message id.
-     */
-    translateWithId?(messageId: ListBoxMenuIconTranslationKey, args?: Record<string, unknown>): string;
 }
 export type ListBoxMenuIconComponent = React.FC<ListBoxMenuIconProps>;
 /**

package/lib/components/ListBox/ListBoxSelection.d.ts

@@ -6,7 +6,8 @@
  */
 import React from 'react';
 import { KeyboardEvent, MouseEvent } from 'react';
-export interface ListBoxSelectionProps {
+import { TranslateWithId } from '../../types/common';
+export interface ListBoxSelectionProps extends TranslateWithId<TranslationKey> {
     /**
      * Specify a function to be invoked when a user interacts with the clear
      * selection element.
@@ -30,18 +31,16 @@ export interface ListBoxSelectionProps {
      * whether the selection should display a badge or a single clear icon.
      */
     selectionCount?: number;
-    /**
-     * i18n hook used to provide the appropriate description for the given menu
-     * icon. This function takes in an id defined in `translationIds` and should
-     * return a string message for that given message id.
-     */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
 }
 export type ListBoxSelectionComponent = React.FC<ListBoxSelectionProps>;
 export declare const translationIds: {
-    'clear.all': string;
-    'clear.selection': string;
+    readonly 'clear.all': "clear.all";
+    readonly 'clear.selection': "clear.selection";
 };
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one

package/lib/components/ListBox/ListBoxSelection.js

@@ -26,6 +26,11 @@ const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationIds['clear.all']]: 'Clear all selected items',
   [translationIds['clear.selection']]: 'Clear selected item'

package/lib/components/Modal/Modal.js

@@ -24,7 +24,7 @@ var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropI
 var wrapFocus = require('../../internal/wrapFocus.js');
 var debounce = require('lodash.debounce');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index$2 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
@@ -42,7 +42,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
   let {
@@ -87,7 +86,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
-  const modalInstanceId = `modal-${getInstanceId()}`;
+  const modalInstanceId = `modal-${useId.useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
   const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;

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

@@ -7,7 +7,16 @@
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType> {
+import { TranslateWithId } from '../../types/common';
+/**
+ * Message ids that will be passed to translateWithId().
+ * Combination of message ids from ListBox/next/ListBoxSelection.js and
+ * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
+ * because those components aren't Typescript.  (If you try, TranslationKey
+ * ends up just being defined as "string".)
+ */
+type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<TranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated
@@ -154,10 +163,6 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    /**
-     * Callback function for translating ListBoxMenuIcon SVG title
-     */
-    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
     type?: 'default' | 'inline';
     /**
      * Specify title to show title on hover

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var Downshift = require('downshift');
-var isEqual = require('lodash.isequal');
+var isEqual = require('react-fast-compare');
 var PropTypes = require('prop-types');
 var React = require('react');
 var filter = require('../ComboBox/tools/filter.js');
@@ -64,6 +64,15 @@ const {
   DropdownKeyDownBackspace,
   FunctionRemoveSelectedItem
 } = Downshift.useMultipleSelection.stateChangeTypes;
+
+/**
+ * Message ids that will be passed to translateWithId().
+ * Combination of message ids from ListBox/next/ListBoxSelection.js and
+ * ListBox/next/ListBoxTrigger.js, but we can't access those values directly
+ * because those components aren't Typescript.  (If you try, TranslationKey
+ * ends up just being defined as "string".)
+ */
+
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     autoAlign = false,
@@ -472,9 +481,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setInputValue('');
     }
   }));
-  const menuProps = getMenuProps({}, {
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
+  const menuProps = React.useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }, {
     suppressRefError: true
-  });
+  }), [autoAlign, getMenuProps, refs.setFloating]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);
@@ -500,6 +513,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     disabled: disabled,
     light: light,
     ref: ref,
+    id: id,
     invalid: invalid,
     invalidText: invalidText,
     warn: warn,
@@ -508,7 +522,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     size: size
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`,
-    ref: refs.setReference
+    ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 &&
   /*#__PURE__*/
   // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
@@ -549,9 +563,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
-    ref: refs.setFloating
-  }), isOpen ? sortedItems.map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

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

@@ -9,11 +9,11 @@ import React, { ReactNode } from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
-import type { InternationalProps } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
-export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by

package/lib/components/MultiSelect/MultiSelect.js

@@ -13,14 +13,14 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var Downshift = require('downshift');
-var isEqual = require('lodash.isequal');
+var isEqual = require('react-fast-compare');
 var PropTypes = require('prop-types');
 var React = require('react');
 var index = require('../ListBox/index.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -39,7 +39,6 @@ var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const {
   ItemClick,
   ToggleButtonBlur,
@@ -110,9 +109,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const {
-    current: multiSelectInstanceId
-  } = React.useRef(getInstanceId());
+  const multiSelectInstanceId = useId.useId();
   const [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
@@ -406,6 +403,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     });
   }
   const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
+  const menuProps = React.useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -432,7 +434,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: multiSelectFieldWrapperClasses,
-    ref: refs.setReference
+    ref: autoAlign ? refs.setReference : null
   }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
@@ -455,9 +457,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
-    ref: refs.setFloating
-  }), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;