@carbon/react 1.63.0-rc.0 → 1.63.0

package/es/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,6 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { TranslateWithId } from '../../types/common';
+declare const defaultTranslations: {
+    readonly 'carbon.progress-step.complete': "Complete";
+    readonly 'carbon.progress-step.incomplete': "Incomplete";
+    readonly 'carbon.progress-step.current': "Current";
+    readonly 'carbon.progress-step.invalid': "Invalid";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof defaultTranslations;
 export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
@@ -63,7 +74,7 @@ declare namespace ProgressIndicator {
         vertical: PropTypes.Requireable<boolean>;
     };
 }
-export interface ProgressStepProps {
+export interface ProgressStepProps extends TranslateWithId<TranslationKey> {
     /**
      * Provide an optional className to be applied to the containing `<li>` node
      */
@@ -112,11 +123,6 @@ export interface ProgressStepProps {
      * The ID of the tooltip content.
      */
     tooltipId?: string;
-    /**
-     * Optional method that takes in a message id and returns an
-     * internationalized string.
-     */
-    translateWithId?: (id: string) => string;
 }
 declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressStep {

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -22,6 +22,11 @@ const defaultTranslations = {
   'carbon.progress-step.current': 'Current',
   'carbon.progress-step.invalid': 'Invalid'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return defaultTranslations[messageId];
 }

package/es/components/Slider/Slider.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
 /**
  * Distinguish two handles by lower and upper positions.
  */
@@ -14,7 +22,9 @@ declare enum HandlePosition {
     UPPER = "upper"
 }
 type ExcludedAttributes = 'onChange' | 'onBlur';
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
+    correctedValue?: string;
+}> {
     /**
      * The `ariaLabel` for the `<input>`.
      */
@@ -136,14 +146,6 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * which will be `(max - min) / stepMultiplier`.
      */
     stepMultiplier?: number;
-    /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice. Translation keys are available on the `translationIds` field for
-     * this component.
-     */
-    translateWithId?: (translationId: string, translationState: {
-        correctedValue?: string;
-    }) => string;
     /**
      * The value of the slider. When there are two handles, value is the lower
      * bound.

package/es/components/Slider/Slider.js

@@ -72,8 +72,13 @@ ThumbWrapper.propTypes = {
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(translationId, translationState) {
-  if (translationId === translationIds.autoCorrectAnnouncement && translationState?.correctedValue) {
+  if (translationState?.correctedValue) {
     const {
       correctedValue
     } = translationState;

package/es/internal/Selection.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 
 function callOnChangeHandler(_ref) {
   let {

package/es/types/common.d.ts

@@ -9,10 +9,15 @@ export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<F
 export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
     as?: Element;
 };
-export interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
+export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
     /**
      * Supply a method to translate internal strings with your i18n tool of
      * choice.
      */
     translateWithId?(messageId: MID, args?: ARGS): string;
 }
+/**
+ * Alias of TranslateWithId. Will be removed in v12
+ * @deprecated Use TranslateWithId instead
+ */
+export type InternationalProps<MID = string, ARGS = Record<string, unknown>> = TranslateWithId<MID, ARGS>;

package/lib/components/ComboBox/ComboBox.d.ts

@@ -7,13 +7,22 @@
 import { UseComboboxProps } from 'downshift';
 import { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
+import { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
     selectedItem: ItemType | null | undefined;
     inputValue?: string | null;
 }
+/**
+ * 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';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
-export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
     /**
      * Specify whether or not the ComboBox should allow a value that is
      * not in the list to be entered in the input
@@ -150,11 +159,6 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/ComboBox/ComboBox.js

@@ -92,6 +92,15 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   }
   return -1;
 };
+
+/**
+ * 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 ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
@@ -397,7 +406,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const menuProps = React.useMemo(() => getMenuProps({
     'aria-label': deprecatedAriaLabel || ariaLabel,
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, deprecatedAriaLabel, ariaLabel]);
+  }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({

package/lib/components/ComboButton/index.d.ts

@@ -9,7 +9,15 @@ import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
 import { MenuAlignment } from '../MenuButton';
-interface ComboButtonProps {
+import { TranslateWithId } from '../../types/common';
+declare const defaultTranslations: {
+    'carbon.combo-button.additional-actions': string;
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof defaultTranslations;
+interface ComboButtonProps extends TranslateWithId<TranslationKey> {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
      */
@@ -42,11 +50,6 @@ interface ComboButtonProps {
      * Specify how the trigger tooltip should be aligned.
      */
     tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
-    /**
-     * Optional method that takes in a message `id` and returns an
-     * internationalized string.
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const ComboButton: React.ForwardRefExoticComponent<ComboButtonProps & React.RefAttributes<HTMLDivElement>>;
 export { ComboButton, type ComboButtonProps };

package/lib/components/ComboButton/index.js

@@ -35,6 +35,11 @@ var _ChevronDown;
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function defaultTranslateWithId(messageId) {
   return defaultTranslations[messageId];
 }

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

@@ -28,6 +28,21 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
+import { TranslateWithId } from '../../types/common';
+declare const translationKeys: {
+    readonly expandRow: "carbon.table.row.expand";
+    readonly collapseRow: "carbon.table.row.collapse";
+    readonly expandAll: "carbon.table.all.expand";
+    readonly collapseAll: "carbon.table.all.collapse";
+    readonly selectAll: "carbon.table.all.select";
+    readonly unselectAll: "carbon.table.all.unselect";
+    readonly selectRow: "carbon.table.row.select";
+    readonly unselectRow: "carbon.table.row.unselect";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys];
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface DataTableCell<T> {
     id: string;
@@ -168,7 +183,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     expandAll: () => void;
     radio: boolean | undefined;
 }
-export interface DataTableProps<RowType, ColTypes extends any[]> {
+export interface DataTableProps<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> {
     children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
     experimentalAutoAlign?: boolean;
     filterRows?: (filterRowsArgs: {
@@ -192,7 +207,6 @@ export interface DataTableProps<RowType, ColTypes extends any[]> {
         locale: string;
     }) => number;
     stickyHeader?: boolean;
-    translateWithId?: (id: string) => string;
     useStaticWidth?: boolean;
     useZebraStyles?: boolean;
 }
@@ -295,7 +309,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
          */
         useZebraStyles: PropTypes.Requireable<boolean>;
     };
-    static translationKeys: string[];
+    static translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[];
     static Table: typeof Table;
     static TableActionList: typeof TableActionList;
     static TableBatchAction: typeof TableBatchAction;
@@ -360,8 +374,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         }) => void) | undefined;
         onExpand?: ((e: MouseEvent) => void) | undefined;
     }) => {
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         'aria-controls': string;
         isExpanded: boolean;
         onExpand: any;
@@ -398,8 +412,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         key: string;
         onExpand: any;
         isExpanded: boolean | undefined;
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         'aria-controls': string;
         isSelected: boolean | undefined;
         disabled: boolean | undefined;
@@ -436,13 +450,13 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onSelect: any;
         id: string;
         name: string;
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         disabled: boolean | undefined;
         radio: true | null;
     } | {
-        ariaLabel: string;
-        'aria-label': string;
+        ariaLabel: any;
+        'aria-label': any;
         checked: boolean;
         id: string;
         indeterminate: boolean;

package/lib/components/DataTable/DataTable.js

@@ -59,6 +59,11 @@ const translationKeys = {
   selectRow: 'carbon.table.row.select',
   unselectRow: 'carbon.table.row.unselect'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationKeys.expandAll]: 'Expand all rows',
   [translationKeys.collapseAll]: 'Collapse all rows',

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type MouseEventHandler } from 'react';
-import type { InternationalProps } from '../../types/common';
+import type { TranslateWithId } from '../../types/common';
 declare const TableBatchActionsTranslationKeys: readonly ["carbon.table.batch.cancel", "carbon.table.batch.items.selected", "carbon.table.batch.item.selected", "carbon.table.batch.selectAll"];
 export type TableBatchActionsTranslationKey = (typeof TableBatchActionsTranslationKeys)[number];
 export interface TableBatchActionsTranslationArgs {
     totalSelected?: number;
     totalCount?: number;
 }
-export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, InternationalProps<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
+export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, TranslateWithId<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
     /**
      * Provide elements to be rendered inside of the component.
      */

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

@@ -6,7 +6,7 @@
  */
 import React, { type MouseEventHandler, ReactNode } from 'react';
 import { sortStates } from './state/sorting';
-import { ReactAttr } from '../../types/common';
+import { TranslateWithId, ReactAttr } from '../../types/common';
 import { DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
@@ -15,7 +15,12 @@ export interface TableHeaderTranslationArgs {
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
 }
-interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
+interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TableHeaderTranslationKey, {
+    header: any;
+    sortDirection: any;
+    isSortHeader: any;
+    sortStates: any;
+}> {
     /**
      * Pass in children that will be embedded in the table header label
      */
@@ -61,17 +66,6 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * NONE, or ASC.
      */
     sortDirection?: string;
-    /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice. Translation keys are available on the `translationKeys` field for
-     * this component.
-     */
-    translateWithId?: (key: TableHeaderTranslationKey, { header, sortDirection, isSortHeader, sortStates }: {
-        header: any;
-        sortDirection: any;
-        isSortHeader: any;
-        sortStates: any;
-    }) => string;
 }
 declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableHeader;

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

@@ -25,6 +25,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'

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/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/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,
@@ -478,7 +487,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     ref: autoAlign ? refs.setFloating : null
   }, {
     suppressRefError: true
-  }), [autoAlign]);
+  }), [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);