@carbon/react 1.63.0-rc.0 → 1.63.1

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
@@ -39,7 +48,10 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift
+     * Additional props passed to Downshift. Use with caution: anything you define
+     * here overrides the components' internal handling of that prop. Downshift
+     * internals are subject to change, and in some cases they can not be shimmed
+     * to shield you from potentially breaking changes.
      */
     downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**
@@ -154,10 +166,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,
@@ -339,7 +348,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   const {
     getDropdownProps
   } = useMultipleSelection({
-    ...downshiftProps,
     activeIndex: highlightedIndex,
     initialSelectedItems,
     selectedItems: controlledSelectedItems,
@@ -355,7 +363,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             break;
           }
       }
-    }
+    },
+    ...downshiftProps
   });
   useEffect(() => {
     if (isOpen && !isMenuOpen) {
@@ -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);
@@ -613,7 +622,10 @@ FilterableMultiSelect.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),

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
@@ -42,7 +42,10 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     disabled?: ListBoxProps['disabled'];
     /**
-     * Additional props passed to Downshift
+     * Additional props passed to Downshift. Use with caution: anything you define
+     * here overrides the components' internal handling of that prop. Downshift
+     * internals are subject to change, and in some cases they can not be shimmed
+     * to shield you from potentially breaking changes.
      */
     downshiftProps?: Partial<UseSelectProps<ItemType>>;
     /**

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';
@@ -166,7 +166,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     });
   }, [items]);
   const selectProps = {
-    ...downshiftProps,
     stateReducer,
     isOpen,
     itemToString: filteredItems => {
@@ -178,7 +177,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
-    }
+    },
+    ...downshiftProps
   };
   const {
     getToggleButtonProps,
@@ -518,7 +518,10 @@ MultiSelect.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes.object,
   /**

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];
 }

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/internal/useId.js

@@ -10,49 +10,70 @@ import setupGetInstanceId from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
 
-// This file was heavily inspired by Reach UI and their work on their auto-id
-const getId = setupGetInstanceId();
+// This file was heavily inspired by:
+
+// This tricks bundlers so they can't statically analyze this and produce
+// compilation warnings/errors.
+// https://github.com/webpack/webpack/issues/14814
+// https://github.com/mui/material-ui/issues/41190
+const _React = {
+  ...React__default
+};
+const instanceId = setupGetInstanceId();
 const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
 let serverHandoffCompleted = false;
+const defaultId = 'id';
 
 /**
- * Generate a unique ID with an optional prefix prepended to it
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
  * @param {string} [prefix]
  * @returns {string}
  */
-function useId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
-  const _prefix = useIdPrefix();
+function useCompatibleId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix();
   const [id, setId] = useState(() => {
     if (serverHandoffCompleted) {
-      return `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`;
+      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
     }
     return null;
   });
   useIsomorphicLayoutEffect(() => {
     if (id === null) {
-      setId(`${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`);
+      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
     }
-  }, [getId]);
+  }, [instanceId]);
   useEffect(() => {
     if (serverHandoffCompleted === false) {
       serverHandoffCompleted = true;
     }
   }, []);
-  if (typeof React__default['useId'] === 'function') {
-    const id = nativeReactUseId(_prefix, prefix);
-    return id;
-  }
   return id;
 }
-function nativeReactUseId(_prefix, prefix) {
-  const getId = React__default['useId']();
-  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
-  return id;
+
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+function useReactId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix();
+  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
 }
 
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ */
+const useId = _React.useId ? useReactId : useCompatibleId;
+
 /**
  * Generate a unique id if a given `id` is not provided
+ * This is an internal utility, not intended for public usage.
  * @param {string|undefined} id
  * @returns {string}
  */
@@ -61,4 +82,4 @@ function useFallbackId(id) {
   return id ?? fallback;
 }
 
-export { useFallbackId, useId };
+export { useCompatibleId, useFallbackId, useId };

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
@@ -48,7 +57,10 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     disabled?: boolean;
     /**
-     * Additional props passed to Downshift
+     * Additional props passed to Downshift. Use with caution: anything you define
+     * here overrides the components' internal handling of that prop. Downshift
+     * internals are subject to change, and in some cases they can not be shimmed
+     * to shield you from potentially breaking changes.
      */
     downshiftProps?: Partial<UseComboboxProps<ItemType>>;
     /**
@@ -150,11 +162,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',
@@ -330,7 +339,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     toggleMenu,
     setHighlightedIndex
   } = Downshift.useCombobox({
-    ...downshiftProps,
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
@@ -351,12 +359,28 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         selectedItem
       });
     },
+    onHighlightedIndexChange: _ref5 => {
+      let {
+        highlightedIndex
+      } = _ref5;
+      if (highlightedIndex > -1 && typeof window !== undefined) {
+        const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+        const highlightedItem = itemArray[highlightedIndex];
+        if (highlightedItem) {
+          highlightedItem.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        }
+      }
+    },
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     stateReducer,
     isItemDisabled(item, _index) {
       return item.disabled;
-    }
+    },
+    ...downshiftProps
   });
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -397,7 +421,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"]({
@@ -572,7 +596,10 @@ ComboBox.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Additional props passed to Downshift
+   * Additional props passed to Downshift. Use with caution: anything you define
+   * here overrides the components' internal handling of that prop. Downshift
+   * internals are subject to change, and in some cases they can not be shimmed
+   * to shield you from potentially breaking changes.
    */
   downshiftProps: PropTypes__default["default"].object,
   /**

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];
 }