@carbon/react 1.63.0-rc.0 → 1.63.1

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
@@ -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/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',
@@ -320,7 +329,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     toggleMenu,
     setHighlightedIndex
   } = useCombobox({
-    ...downshiftProps,
     items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
@@ -341,12 +349,28 @@ const ComboBox = /*#__PURE__*/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,
@@ -387,7 +411,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({
@@ -562,7 +586,10 @@ ComboBox.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/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.
@@ -36,7 +36,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     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<UseSelectProps<ItemType>>;
     /**
@@ -123,10 +126,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/Dropdown/Dropdown.js

@@ -22,10 +22,6 @@ import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
-  ToggleButtonKeyDownArrowDown,
-  ToggleButtonKeyDownArrowUp,
-  ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownEnd,
   ItemMouseMove,
   MenuMouseLeave
 } = useSelect.stateChangeTypes;
@@ -113,7 +109,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     isFluid
   } = useContext(FormContext);
   const selectProps = {
-    ...downshiftProps,
     items,
     itemToString,
     initialSelectedItem,
@@ -122,28 +117,31 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     isItemDisabled(item, _index) {
       const isObject = item !== null && typeof item === 'object';
       return isObject && 'disabled' in item && item.disabled === true;
-    }
+    },
+    onHighlightedIndexChange: _ref3 => {
+      let {
+        highlightedIndex
+      } = _ref3;
+      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'
+          });
+        }
+      }
+    },
+    ...downshiftProps
   };
   const dropdownInstanceId = useId();
   function stateReducer(state, actionAndChanges) {
     const {
       changes,
-      props,
       type
     } = actionAndChanges;
-    const {
-      highlightedIndex
-    } = changes;
     switch (type) {
-      case ToggleButtonKeyDownArrowDown:
-      case ToggleButtonKeyDownArrowUp:
-      case ToggleButtonKeyDownHome:
-      case ToggleButtonKeyDownEnd:
-        if (highlightedIndex > -1) {
-          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
-          props.scrollIntoView(itemArray[highlightedIndex]);
-        }
-        return changes;
       case ItemMouseMove:
       case MenuMouseLeave:
         return {
@@ -208,10 +206,10 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-  function onSelectedItemChange(_ref3) {
+  function onSelectedItemChange(_ref4) {
     let {
       selectedItem
-    } = _ref3;
+    } = _ref4;
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
@@ -362,7 +360,10 @@ Dropdown.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/FluidMultiSelect/FluidMultiSelect.js

@@ -65,7 +65,10 @@ FluidMultiSelect.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/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'