chore: fix dropdown's translatewithid() signature (#15516)

Restore ListBoxMenuIconTranslationKey type that was available in Carbon 10.
Relatedly, fix ListBoxMenuIcon's translateWithId() signature so messageId is
type ListBoxMenuIconTranslationKey, rather than just type string.

Finally, do the identical fix to Dropdown's translateWithId() signature,
and export a DropdownTranslationKey type.

The translationIds objects from #435 (cc @joshblack) didn't seem to
be helping, especially since they aren't exported from ListBox/index.ts.
I removed ListBoxMenuIcon's translationIds object as part of adding this typing.

Note that neither ListBoxMenuIconTranslationKey nor even ListBox itself
is exported from @carbon/react.  But Dropdown is.

Co-authored-by: TJ Egan <tw15egan@gmail.com>

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -29,6 +29,7 @@ import {
   WarningFilled,
 } from '@carbon/icons-react';
 import ListBox, {
+  type ListBoxMenuIconTranslationKey,
   ListBoxSize,
   ListBoxType,
   PropTypes as ListBoxPropTypes,
@@ -212,7 +213,10 @@ export interface DropdownProps<ItemType>
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
-  translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+  translateWithId?(
+    messageId: ListBoxMenuIconTranslationKey,
+    args?: Record<string, unknown>
+  ): string;
 
   /**
    * The dropdown type, `default` or `inline`
@@ -230,6 +234,8 @@ export interface DropdownProps<ItemType>
   warnText?: React.ReactNode;
 }
 
+export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
+
 const Dropdown = React.forwardRef(
   <ItemType,>(
     {

packages/react/src/components/Dropdown/index.ts

@@ -5,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import Dropdown, { OnChangeData } from './Dropdown';
+import Dropdown, {
+  type DropdownTranslationKey,
+  type OnChangeData,
+} from './Dropdown';
 
-export type { OnChangeData };
+export type { DropdownTranslationKey, OnChangeData };
 export { Dropdown };
 export { default as DropdownSkeleton } from './Dropdown.Skeleton';
 

packages/react/src/components/ListBox/ListBoxMenuIcon.tsx

@@ -11,17 +11,15 @@ import PropTypes from 'prop-types';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
 
-export const translationIds = {
-  'close.menu': 'close.menu',
-  'open.menu': 'open.menu',
-};
+export type ListBoxMenuIconTranslationKey = 'close.menu' | 'open.menu';
 
-const defaultTranslations = {
-  [translationIds['close.menu']]: 'Close menu',
-  [translationIds['open.menu']]: 'Open menu',
+const defaultTranslations: Record<ListBoxMenuIconTranslationKey, string> = {
+  'close.menu': 'Close menu',
+  'open.menu': 'Open menu',
 };
 
-const defaultTranslateWithId = (id: string) => defaultTranslations[id];
+const defaultTranslateWithId = (id: ListBoxMenuIconTranslationKey): string =>
+  defaultTranslations[id];
 
 export interface ListBoxMenuIconProps {
   /**
@@ -32,10 +30,13 @@ export interface ListBoxMenuIconProps {
 
   /**
    * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
+   * icon. This function takes in a ListBoxMenuIconTranslationKey and should
    * return a string message for that given message id.
    */
-  translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+  translateWithId?(
+    messageId: ListBoxMenuIconTranslationKey,
+    args?: Record<string, unknown>
+  ): string;
 }
 
 export type ListBoxMenuIconComponent = React.FC<ListBoxMenuIconProps>;
@@ -71,7 +72,7 @@ ListBoxMenuIcon.propTypes = {
 
   /**
    * i18n hook used to provide the appropriate description for the given menu
-   * icon. This function takes in an id defined in `translationIds` and should
+   * icon. This function takes a ListBoxMenuIconTranslationKey and should
    * return a string message for that given message id.
    */
   translateWithId: PropTypes.func,

packages/react/src/components/ListBox/index.ts

@@ -36,3 +36,5 @@ const ListBox: ListBoxComponent = Object.assign(ListBoxInternal, {
 });
 
 export default ListBox;
+
+export type { ListBoxMenuIconTranslationKey } from './ListBoxMenuIcon';