@carbon/react 1.63.0-rc.0 → 1.63.0

package/es/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/es/components/ComboBox/ComboBox.js

@@ -82,6 +82,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__*/forwardRef((props, ref) => {
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
@@ -387,7 +396,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const menuProps = useMemo(() => getMenuProps({
     'aria-label': deprecatedAriaLabel || ariaLabel,
     ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, deprecatedAriaLabel, ariaLabel]);
+  }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({

package/es/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/es/components/ComboButton/index.js

@@ -25,6 +25,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/es/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/es/components/DataTable/DataTable.js

@@ -49,6 +49,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/es/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/es/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/es/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/es/components/DataTable/TableToolbarSearch.js

@@ -15,6 +15,10 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
+/**
+ * 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/es/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/es/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/es/components/FormGroup/FormGroup.js

@@ -13,6 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const FormGroup = _ref => {
   let {
+    disabled = false,
     legendId,
     legendText,
     invalid = false,
@@ -24,7 +25,9 @@ const FormGroup = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const classNamesFieldset = cx(`${prefix}--fieldset`, className);
-  return /*#__PURE__*/React__default.createElement("fieldset", _extends({}, invalid && {
+  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
+    disabled: disabled
+  }, invalid && {
     'data-invalid': ''
   }, {
     className: classNamesFieldset
@@ -46,6 +49,10 @@ FormGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes.string,
+  /**
+   * Specify whether the FormGroup should be disabled
+   */
+  disabled: PropTypes.bool,
   /**
    * Specify whether the <FormGroup> is invalid
    */

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

@@ -16,6 +16,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/es/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/es/components/MultiSelect/FilterableMultiSelect.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
@@ -52,6 +52,15 @@ const {
   DropdownKeyDownBackspace,
   FunctionRemoveSelectedItem
 } = 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.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     autoAlign = false,
@@ -466,7 +475,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     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);

package/es/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/es/components/MultiSelect/MultiSelect.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import { useSelect } from 'downshift';
-import isEqual from 'lodash.isequal';
+import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState, useLayoutEffect, useMemo } from 'react';
 import ListBox from '../ListBox/index.js';

package/es/components/NumberInput/NumberInput.d.ts

@@ -5,12 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import { TranslateWithId } from '../../types/common';
 export declare const translationIds: {
-    'increment.number': string;
-    'decrement.number': string;
+    readonly 'increment.number': "increment.number";
+    readonly 'decrement.number': "decrement.number";
 };
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
     /**
      * `true` to allow empty string.
      */
@@ -115,10 +120,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
     step?: number;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify the value of the input
      */

package/es/components/NumberInput/NumberInput.js

@@ -24,6 +24,11 @@ const translationIds = {
   'increment.number': 'increment.number',
   'decrement.number': 'decrement.number'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -5,7 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.pagination-nav.next': "Next";
+    readonly 'carbon.pagination-nav.previous': "Previous";
+    readonly 'carbon.pagination-nav.item': "Page";
+    readonly 'carbon.pagination-nav.active': "Active";
+    readonly 'carbon.pagination-nav.of': "of";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
     /**
      * Additional CSS class names.
      */
@@ -35,11 +47,6 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      * The total number of items.
      */
     totalItems?: number;
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
 export default PaginationNav;

package/es/components/PaginationNav/PaginationNav.js

@@ -21,6 +21,11 @@ const translationIds = {
   'carbon.pagination-nav.active': 'Active',
   'carbon.pagination-nav.of': 'of'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return translationIds[messageId];
 }